直接上代碼
html和js
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <style> fieldset { width: 400px; height: 150px; } .uploadImg { width: 40px; height: 40px; } a { padding: 10px; text-decoration: none; border: 2px solid #e27b32; position: relative; top: 17px; left: 24%; color: #d46c6c; border-radius: 18px; } .outputContain { width: 400px; height: 56px; overflow-x: auto; overflow-y: hidden; } </style> </head> <body> <fieldset> <legend>上傳圖片-獲取圖片</legend> <div class="contain"> <form enctype="multipart/form-data" method="post" name="form"> <input type="file" id="file" name="file" multiple="multiple" /> </form> <div id="progress"></div> <div class="outputContain"> <div id="output"></div> </div> <a href="javascript:clear()">清空所有</a> <a href="javascript:uploadFile()">上傳文件</a> </div> </fieldset> <a href="javascript:testReq()">測試請求</a> <script> 'use strict' var progressTip = document.getElementById('progress'), outPutTip = document.getElementById('output'), fileInput = document.getElementById('file'); //ajax+FormData上傳文件 function uploadFile() { var formData = new FormData(document.forms.namedItem('form')); var needResult = 0; formData.append('needResult', needResult); var xhr = new XMLHttpRequest(); xhr.open('post', '/home/upload', true); xhr.setRequestHeader('testHeader', 'testHeader'); xhr.timeout = 60 * 1000; xhr.ontimeout = function (event) { progressTip.innerHTML = '超時(60s)'; } xhr.onload = function (event) { progressTip.innerHTML = '上傳完成'; if (this.status === 200) { //needResult == 1 && this.responseText.toString().split('|').forEach(function (url) { // getImg(url); //}); } else { progressTip.innerHTML = 'error:狀態碼：' + this.status + ' 錯誤消息：' + this.statusText; } } xhr.upload.onprogress = function (event) { if (event.lengthComputable) { var pro = ((event.loaded / event.total).toFixed(4) * 100).toFixed(2); progressTip.innerHTML = '上傳進度:' + pro + '%<br/>'; } } xhr.send(formData); } //ajax下載文件 function getImg(url) { var xhr = new XMLHttpRequest(); xhr.open('get', url, true); xhr.responseType = 'blob'; xhr.onload = function (e) { if (this.status === 200) { getFileReaderResult(this.response, function (result) { appendImgToBox(result); }); } else { progressTip.innerHTML = '發生錯誤'; } } xhr.send(); } //返回blog:圖片鏈接的預覽 function getFileUrl(file) { var src = window.URL.createObjectURL(file); return src || ''; } //FileReader讀取文件，返回base64的圖片 function getFileReaderResult(blob, callback) { var fileReader = new FileReader(); fileReader.readAsDataURL(blob); fileReader.onprogress = function (event) { if (event.lengthComputable) { var pro = ((event.loaded / event.total).toFixed(4) * 100).toFixed(2); progressTip.innerHTML = '預覽進度:' + pro + '%<br/>'; } } fileReader.onloadend = function () { progressTip.innerHTML = '預覽完成'; typeof callback === 'function' && callback(this.result); } } //添加一個預覽圖到預覽列表里面 function appendImgToBox(src) { outPutTip.innerHTML += '<image class="uploadImg" src="' + src + '"/>'; var imgCount = document.getElementsByClassName('uploadImg').length, singleImgWidth = document.getElementsByClassName('uploadImg')[0].offsetWidth; outPutTip.style.width = imgCount * singleImgWidth + 'px'; } //重置頁面 function clear() { outPutTip.innerHTML = ''; outPutTip.style.width = '0px'; fileInput.value = ''; } //選擇文件后生產預覽圖 fileInput.addEventListener('change', function (e) { for (var i = 0; i < e.target.files.length; i++) { getFileReaderResult(e.target.files[i], function (result) { appendImgToBox(result); }); } }); function testReq() { var xhr = new XMLHttpRequest(); xhr.open('post', '/home/add', true); xhr.onprogress = function (e) { console.log(e); } xhr.upload.onprogress = function (e) { console.log(e); } xhr.onload = function () { if (this.status == 200) { if (this.readyState == 4) { alert('完成'); } } } xhr.send(); } </script> </body> </html>
C#后台接收上傳的文件
public string Upload() { HttpFileCollectionBase files = Request.Files; string dirName = "Upload"; string saveDir = Server.MapPath("~/" + dirName + "/"); if (!Directory.Exists(saveDir)) Directory.CreateDirectory(saveDir); List<string> uploadedFiles = new List<string>(); string baseUrl = Request.Url.Scheme + "://" + Request.Url.Host + ":" + Request.Url.Port + "/"; for (int i = 0; i < files.Count; i++) { HttpPostedFileBase file = files[i]; if (file.ContentLength == 0) continue; FileInfo fileInfo = new FileInfo(file.FileName); string fileName = Guid.NewGuid().ToString("N") + fileInfo.Extension, savePath = Path.Combine(saveDir, fileName); file.SaveAs(savePath); uploadedFiles.Add(baseUrl + dirName + "/" + fileName); } return Request.Form["needResult"] == "1" ? string.Join("|", uploadedFiles) : string.Empty; }
預覽來一發：
