文件上传只能通过表单提交的形式，编码方式为multipart/form-data，这个我在《三种上传文件不刷新页面的方法讨论：iframe/FormData/FileReader》已做详细讨论，可以通过写一个form标签进行提交，但也可以模拟表单提交的格式，表单提交的格式在那篇文章已提及。
首先创建一个ajax请求：
JavaScript
var xhr = new XMLHttpRequest(); xhr.open('POST', upload_url, true); var boundary = 'someboundary'; xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary); varxhr=newXMLHttpRequest(); xhr.open('POST',upload_url,true); varboundary='someboundary'; xhr.setRequestHeader('Content-Type','multipart/form-data; boundary='+boundary);
并设置编码方式，然后拼表单格式的数据进行上传：
ajax上传 JavaScript
var data = img.src; data = data.replace('data:' + file.type + ';base64,', ''); xhr.sendAsBinary([ //name=data '--' + boundary, 'Content-Disposition: form-data;; filename="' + file.name + '"', 'Content-Type: ' + file.type, '', atob(data), '--' + boundary, //name=docName '--' + boundary, 'Content-Disposition: form-data;', '', file.name, '--' + boundary + '--' ].join('\r\n')); vardata=img.src; data=data.replace('data:'+file.type+';base64,',''); xhr.sendAsBinary([ //name=data '--'+boundary, 'Content-Disposition: form-data;; filename="'+file.name+'"', 'Content-Type: '+file.type,'', atob(data),'--'+boundary, //name=docName '--'+boundary, 'Content-Disposition: form-data;','', file.name, '--'+boundary+'--' ].join('\r\n'));
表单数据不同的字段是用boundary的随机字符串分隔的。拼好之后用sendAsBinary发出去，在调这个函数之前先监听下它的事件，包括
1) 上传的进度：
上传进度 JavaScript
xhr.upload.onprogress = function(event){ if(event.lengthComputable) { duringCallback((event.loaded / event.total) * 100); } }; xhr.upload.onprogress=function(event){ if(event.lengthComputable){ duringCallback((event.loaded/event.total)*100); } };
这里凋duringCallback的回调函数，给这个回调函数传了当前进度的参数，用这个参数就可以设置进度条的过程了。进度条可以自己实现，或者直接上网找一个，随便一搜就有了。
2) 成功和失败：
成功和失败回调 JavaScript
xhr.onreadystatechange = function() { if (this.readyState == 4){ if (this.status == 200) { successCallback(this.responseText); }else if (this.status >= 400) { if (errorCallback && errorCallback instanceof Function) { errorCallback(this.responseText); } } } }; xhr.onreadystatechange=function(){ if(this.readyState==4){ if(this.status==200){ successCallback(this.responseText); }elseif(this.status>=400){ if(errorCallback&& errorCallback instanceofFunction){ errorCallback(this.responseText); } } } };
这个上传功能参考了一个JIC插件
至此整个功能就拆解说明完了，上面的代码可以兼容到IE10，FileReader的api到IE10才兼容，问题应该不大，因为微软都已经放弃了IE11以下的浏览器，为啥我们还要去兼容呢。
这个东西一来减少了后端的压力，二来不用和后端来回交互，对用户来说还是比较好的，除了上面说的一个地方会被卡一下之外。核心代码已在上面说明，完整代码和demo就不再放出来了。
以上所述是小编给大家介绍的WEB前端实现裁剪上传图片功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: