小知识:利用FileReader和FormData实现图片预览和上传(base64转二进制文件)

销售业务有位市场需求,要做相片自动更新上载,往后都是应用程序上载给后端,后端回到url后端展开自动更新,那时只不过能不倚赖后端做自动更新,最终在上载,这主要就倚赖FileReaderFormData这三个第一类和JavaScript处置十进制的潜能。

<inputtype="file">
input.on.(change, preview);

自动更新

自动更新采用FileReader第一类拼读:

functionpreview(e){varfile = e.target.files[0];varreader =newFileReader();

    reader.onloadend =function(){// 相片的 base64 格式, 能直接当成 img 的 src 属性值vardataURL = reader.result;varimg =newImage();
        img.src = dataURL;// 插入到 DOM 中自动更新// ...};

    reader.readAsDataURL(file);// 读出 base64}

提交相片文档(十进制文档 非 base64)

base64 转 十进制文档

function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(,)[1]);
    var mimeString = dataURI.split(,)[0].split(:)[1].split(;)[0];
    var ab =newArrayBuffer(byteString.length);
    var ia =newUint8Array(ab);for(var i =0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }returnnewBlob([ab], {type: mimeString});
}

构造FormData填充十进制文档数据,通过ajax的方式展开提交:

varfd =newFormData();varblob = dataURItoBlob(dataURL);
fd.append(file, blob);


$.ajax({
    type:POST,
    url:/upload,
    data: fd,
    processData:false,// 不会将 data 参数序列化字符串contentType:false,// 根据表单 input 提交的数据采用其默认的 contentTypexhr:function() {varxhr =newwindow.XMLHttpRequest();
        xhr.upload.addEventListener("progress",function(evt) {if(evt.lengthComputable) {varpercentComplete = evt.loaded / evt.total;
                console.log(进度, percentComplete);
            }
        },false);returnxhr;
    }
}).success(function(res){// 拿到提交的结果}).error(function(err){console.error(err);
});

注意

不要漏了指定processDatacontentTypefalse

压缩

销售业务中不需要后端不需要压缩,因为后端有更靠谱的压缩方案,但是后端只不过也能压缩,那就是用canvas把图画出适合的大小,然后上载。

主要就流程:

  • new出来的Image第一类,我们监听它的onload事件
  • 按照压缩比例,算出压缩后的相片尺寸
  • 创建canvas,尺寸设置成上一步骤算出来的压缩后的相片尺寸
  • 调用drawImage方法,把相片绘制到canvas
  • 调用canvastoDataURL,取出base64格式的数据
  • 后续的传图步骤和上面的原图上载一样
varimg =newImage();

img.onload =function(){// 当相片宽度超过 400px 时, 就压缩成 400px, 高度按比例计算// 压缩质量能根据实际情况调整varw = Math.min(400, img.width);varh = img.height * (w / img.width);varcanvas = document.createElement(canvas);varctx = canvas.getContext(2d);// 设置 canvas 的宽度和高度canvas.width = w;
    canvas.height = h;// 把相片绘制到 canvas 中ctx.drawImage(img,0,0, w, h);// 取出 base64 格式数据vardataURL = canvas.toDataURL(image/png);// ...};

img.src = reader.result;

转自:http://blog.csdn.net/hsany330/article/details/52575459

建站知识

猿站网:有关我对 vertical-align 理解

2022-5-22 0:15:51

建站知识

小知识:初探 React Router 4.0

2022-5-22 0:26:11

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索