小李飞刀资源网 Design By www.iooab.com
服务器准备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实现异步上传文件,支持跨域,带有上传进度条就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
小李飞刀资源网 Design By www.iooab.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
小李飞刀资源网 Design By www.iooab.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]