给大家详细讲解一下如何通过javascript写出异步图片上传，并且把实例代码给大家分享了下，有兴趣的读者们测试一下吧。
我们首先看下HTML代码实现的form提交部分。其中大家在测试的时候需要把test的URL更换成自己的，也可以直接写一个本地地址测试。
html代码：
登录后复制
js代码：
var Fileupload = { fileInput: $("#fileImage").get(0), dragDrop: $("#fileDragArea").get(0), upButton: $("#fileSubmit").get(0), url: $("#uploadForm").attr("action"), })(), //文件上传 funUploadFile: function() { var self = this; for (var i = 0, file; file = this.fileFilter[i]; i++) { (function(file) { var xhr = new XMLHttpRequest(); if (xhr.upload) { // 上传中 xhr.upload.addEventListener("progress", function(e) { self.onProgress(file, e.loaded, e.total); }, false); // 文件上传成功或是失败 xhr.onreadystatechange = function(e) { if (xhr.readyState == 4) { if (xhr.status == 200) { self.onSuccess(JSON.parse(xhr.responseText)); self.funDeleteFile(file); if (!self.fileFilter.length) { //全部完毕 self.onComplete(); } } else { self.onFailure(file, xhr.responseText); } } }; //准备FormData对象 var myForm = document.getElementById('uploadForm'); //将文件放入FormData对象中 formData = new FormData(myForm); // 开始上传 xhr.open("POST", self.url, true); xhr.send(formData); } })(file); } }, init: function() { var self = this； //上传按钮提交 if (this.upButton) { console.log('提示： 当前存储服务器地址', this.url) this.upButton.addEventListener("click", function(e) { self.funUploadFile(e); }, false); } self.bindEvent(); } }; Fileupload = $.extend(Fileupload); Fileupload.init();
登录后复制
FormData 异步上传文件
立即学习“Java免费学习笔记（深入）”；
登录后复制
一、创建FormData放入待上传文件
//准备FormData对象var formData = new FormData(), uploadFile = document.getElementById('file'); //将文件放入FormData对象中 formData.append('file', uploadFile.files[0]);
登录后复制
二、通过xhr发送FormData数据到服务器，实现文件上传
//创建xhr对象var xhr = new XMLHttpRequest();//监听文件上传进度xhr.upload.onprogress = function(evt){ //lengthComputabel: 文件长度是否可计算 if(evt.lengthComputable){ //evt.loaded: 已下载的字节数 //evt.total: 文件总字节数 var percent = Math.round(evt.loaded*100/evt.total); console.log(percent); }}//监听文件传输开始 xhr.onloadstart = function(evt）{ xhr.abort() //终止上传}//监听ajax成功完成事件xhr.onload = function(evt){ ...}//监听ajax错误事件 xhr.onerror = function(evt){ ...}//监听ajax被中止事件xhr.onabort = function(evt){ ...}//监听传输结束事件: 不管成功或者失败都会触发xhr.onloaded = function(evt){ ...} //*发起ajax请求数据xhr.open('POST', '/url', true);xhr.send(formData);
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
如何实现单层json按照key字母顺序排序（详细教程）
在Thinkjs3中如何使用静态资源目录
有关JsonObject中的key-value数据解析排序（详细教程）
以上就是在javascript中如何实现异步图片上传的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2749372.html
