佛山高端网站建设报价,线下推广怎么做,学习软件合集,精品课程网站建设毕业设计论文需求#xff1a; 点击上传图片按钮#xff0c;选择图片以后#xff0c;不请求后端接口#xff0c;直接将图片展示在缩略图中。
解决方案#xff1a; 使用 FileReader 和 FileReader 中的 readAsDataURL 方法。
第一步 从input[type“file”] (上传文件标签) 里面拿到fil…需求 点击上传图片按钮选择图片以后不请求后端接口直接将图片展示在缩略图中。
解决方案 使用 FileReader 和 FileReader 中的 readAsDataURL 方法。
第一步 从input[type“file”] (上传文件标签) 里面拿到file数据类似下图 第二步 拿到file数据后执行下面代码
// file 是文件数据// 读取文件
var reader new FileReader();
// base64位读取
reader.readAsDataURL(file);
reader.onload function (e) {// 给img标签src复制结果是base64图片img_src e.target.result;
}效果展示
选择前 选择图片 选择后
