使用Html5实现异步上传文件,支持跨域,带有上传进度条

1、使用html5实现异步上传文件,支持跨域,带有上传进度条服务器预备iis需要设置iis里面的http响应标头，添加如下设置，添加这项access-control-allow-origin，惟独添加了这行才干支持跨域，不然像chrome扫瞄器会报错 页面代码：xml/html code复制内容到剪贴板 html5上传文件 html5上传文件测试，带进度条 function fileselected() /重置状态显示 document.getelementbyid("msg").innerhtml = "" document

2、.getelementbyid(&39;percentnumber&39;).innerhtml = &39;&39; document.getelementbyid("progress").style.width = "0%" var file = document.getelementbyid(&39;fileinput&39;).files0; if (file) var filesize = 0; if (file.size > 1024 * 1024) fil

3、esize = (math.round(file.size * 100 / (1024 * 1024) / 100).tostring() + &39;mb&39; else filesize = (math.round(file.size * 100 / 1024) / 100).tostring() + &39;kb&39; document.getelementbyid(&39;filename&39;).innerhtml = &39;name: &39; + ; document.getelementb

4、yid(&39;filesize&39;).innerhtml = &39;size: &39; + filesize; document.getelementbyid(&39;filetype&39;).innerhtml = &39;type: &39; + file.type; function uploadfile() var fd = new formdata(); fd.append("fileinput", document.getelementbyid(&39;filei

5、nput&39;).files0); var xhr = new xmlhttprequest(); xhr.upload.addeventlistener("progress", uploadprogress, false); xhr.addeventlistener("load", uploadcomplete, false); xhr.addeventlistener("error", uploadfailed, false); xhr.addeventlistener(&

6、amp;quot;abort", uploadcanceled, false); xhr.open("post", "00:9001/home/upload");/修改为自己服务器接口地址 /xhr.setrequestheader("access-control-allow-origin", "*");/需要在iis里面配置，就可以跨域哀求了 /xhr.setrequestheader(&quot

7、;content-type", "multipart/form-data"); xhr.send(fd); function uploadprogress(evt) if (evt.lengthcomputable) var percentcomplete = math.round(evt.loaded * 100 / evt.total); document.getelementbyid(&39;percentnumber&39;).innerhtml = percentcomplete + &39;%&3

8、9; var jindutiao = document.getelementbyid("progress"); jindutiao.style.width = percentcomplete + "%" else document.getelementbyid(&39;percentnumber&39;).innerhtml = &39;不支持进度计算&39; function uploadcomplete(evt) /evt.target.responsetext document.getelementbyid("msg").innerhtml = "上传胜利" function uploadfailed(evt) document.getelementbyid("msg").innerhtml = "上传过程中有一个错误" fun