使用Html5實(shí)現(xiàn)異步上傳文件,支持跨域,帶有上傳進(jìn)度條
2016/12/30 9:40:33來(lái)源:互聯(lián)網(wǎng)
服務(wù)器預(yù)備IIS
必要設(shè)置IIS里面的HTTP相應(yīng)標(biāo)頭,如圖添加如下設(shè)置,添加這項(xiàng)“Access-Control-Allow-Origin”,只有添加了這行才能支持跨域,不然像Chrome欣賞器會(huì)報(bào)錯(cuò)
頁(yè)面代碼:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!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上傳文件測(cè)試,帶進(jìn)度條</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() {
- //重置狀況表現(xiàn)
- 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");//修改為本身服務(wù)器接口地址
- //xhr.setRequestHeader("Access-Control-Allow-Origin", "*");//必要在IIS里面配置,就可以跨域請(qǐng)求了
- //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 = '不支持進(jìn)度計(jì)算';
- }
- }
- function uploadComplete(evt) {
- //evt.target.responseText
- document.getElementById("msg").innerHTML = "上傳成功";
- }
- function uploadFailed(evt) {
- document.getElementById("msg").innerHTML = "上傳過(guò)程中有一個(gè)錯(cuò)誤";
- }
- function uploadCanceled(evt) {
- document.getElementById("msg").innerHTML = "用戶取消了上傳或者欣賞器刪除了連接";
- }
- </script>
- </body>
- </html>
以上這篇使用Html5實(shí)現(xiàn)異步上傳文件,支持跨域,帶有上傳進(jìn)度條就是小編分享給大家的悉數(shù)內(nèi)容了,盼望能給大家一個(gè)參考,也盼望大家多多支持圖趣網(wǎng)。
[教程作者:佚名]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/wd3353.html
本文地址:http://m.likemindfilms.com/tutorial/wd3353.html
這些是最新的
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏
最熱門的教程