使用Html5实现异步上传文件,支持跨域,带有上传进度条
程序员文章站
2022-07-22 21:51:19
下面小编就为大家带来一篇使用Html5实现异步上传文件,支持跨域,带有上传进度条。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧... 16-09-17...
服务器准备iis
需要设置iis里面的http响应标头，如图添加如下设置，添加这项“access-control-allow-origin”，只有添加了这行才能支持跨域，不然像chrome浏览器会报错
页面代码：
xml/html code复制内容到剪贴板
- <!doctype html>
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html;charset=utf-8">
- <meta name="format-detection" content="telephone=no">
- <meta name="msapplication-tap-highlight" content="no">
- <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
- <title>html5上传文件</title>
- </head>
- <body>
- <div class="app">
- <h1>html5上传文件测试，带进度条</h1>
- <div>
- <input type="file" value="" id="fileinput" name="files" onchange="fileselected()" />
- <div style="margin:30px;">
- <input type="button" value="上传" onclick="uploadfile()" />
- </div>
- <div style="margin:30px;">
- <div id="filename"></div>
- <div id="filesize"></div>
- <div id="filetype"></div>
- </div>
- <div style="margin:30px;width:500px;height:15px;border:1px solid #aeaeae;">
- <div id="progress" style="background:#4cff00;height:15px;width:0%;"></div>
- <div id="percentnumber"></div>
- </div>
- <div style="margin:30px;">
- <div id="msg"></div>
- </div>
- </div>
- </div>
- <script type="text/javascript">
- function fileselected() {
- //重置状态显示
- document.getelementbyid("msg").innerhtml = "";
- document.getelementbyid('percentnumber').innerhtml = '';
- document.getelementbyid("progress").style.width = "0%";
- var file = document.getelementbyid('fileinput').files[0];
- if (file) {
- var filesize = 0;
- if (file.size > 1024 * 1024)
- filesize = (math.round(file.size * 100 / (1024 * 1024)) / 100).tostring() + 'mb';
- else
- filesize = (math.round(file.size * 100 / 1024) / 100).tostring() + 'kb';
- document.getelementbyid('filename').innerhtml = 'name: ' + file.name;
- document.getelementbyid('filesize').innerhtml = 'size: ' + filesize;
- document.getelementbyid('filetype').innerhtml = 'type: ' + file.type;
- }
- }
- function uploadfile() {
- var fd = new formdata();
- fd.append("fileinput", document.getelementbyid('fileinput').files[0]);
- var xhr = new xmlhttprequest();
- xhr.upload.addeventlistener("progress", uploadprogress, false);
- xhr.addeventlistener("load", uploadcomplete, false);
- xhr.addeventlistener("error", uploadfailed, false);
- xhr.addeventlistener("abort", uploadcanceled, false);
- xhr.open("post", "http://10.0.0.200:9001/home/upload");//修改为自己服务器接口地址
- //xhr.setrequestheader("access-control-allow-origin", "*");//需要在iis里面配置，就可以跨域请求了
- //xhr.setrequestheader("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('percentnumber').innerhtml = percentcomplete + '%';
- var jindutiao = document.getelementbyid("progress");
- jindutiao.style.width = percentcomplete + "%";
- }
- else {
- document.getelementbyid('percentnumber').innerhtml = '不支持进度计算';
- }
- }
- function uploadcomplete(evt) {
- //evt.target.responsetext
- document.getelementbyid("msg").innerhtml = "上传成功";
- }
- function uploadfailed(evt) {
- document.getelementbyid("msg").innerhtml = "上传过程中有一个错误";
- }
- function uploadcanceled(evt) {
- document.getelementbyid("msg").innerhtml = "用户取消了上传或者浏览器删除了连接";
- }
- </script>
- </body>
- </html>
以上这篇使用html5实现异步上传文件,支持跨域,带有上传进度条就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。