销售业务有位市场需求，要做相片自动更新上载，往后都是应用程序上载给后端，后端回到url后端展开自动更新，那时只不过能不倚赖后端做自动更新，最终在上载，这主要就倚赖FileReader和FormData这三个第一类和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); });
注意
不要漏了指定
processData和contentType为false。压缩
销售业务中不需要后端不需要压缩，因为后端有更靠谱的压缩方案，但是后端只不过也能压缩，那就是用canvas把图画出适合的大小，然后上载。
主要就流程：
- 在
new出来的Image第一类，我们监听它的onload事件 - 按照压缩比例，算出压缩后的相片尺寸
- 创建
canvas，尺寸设置成上一步骤算出来的压缩后的相片尺寸 - 调用
drawImage方法，把相片绘制到canvas中 - 调用
canvas的toDataURL，取出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
声明： 猿站网有关资源均来自网络搜集与网友提供，任何涉及商业盈利目的的均不得使用，否则产生的一切后果将由您自己承担！ 本平台资源仅供个人学习交流、测试使用 所有内容请在下载后24小时内删除，制止非法恶意传播，不对任何下载或转载者造成的危害负任何法律责任！也请大家支持、购置正版！ 。本站一律禁止以任何方式发布或转载任何违法的相关信息访客发现请向站长举报，会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。本网站的资源部分来源于网络，如有侵权烦请发送邮件至：2697268773@qq.com进行处理。