本文转自:http://hi.baidu.com/softworm/item/ed0aa753df00373094eb05cf
HTML
1
2
3
4
5
6
|
< form id = "form1" name = "form1" > < input type = "file" name = "fileToUpload" id = "fileToUpload" multiple = "multiple" /> < progress id = "progressBar" value = "0" max = "100" ></ progress > < span id = "percentage" ></ span > < input type = "button" onclick = "UpladFile()" value = "Upload" /> </ form > |
JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<script type= "text/javascript" > function UpladFile() { // js 获取文件对象 var fileObj = document.getElementById( "fileToUpload2" ).files; // 接收上传文件的后台地址 var FileController = "/Home/Upload" ; // FormData 对象 var form = new FormData(); // 可以增加表单数据 form.append( "author" , "hooyes" ); // 文件对象 for ( var i = 0; i < fileObj.length; i++) form.append( "file" + i, fileObj[i]); // XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); xhr.open( "post" , FileController, true ); xhr.onload = function () { alert( "上传完成!" ); }; xhr.upload.addEventListener( "progress" , progressFunction, false ); xhr.send(form); } function progressFunction(evt) { var progressBar = document.getElementById( "progressBar" ); var percentageDiv = document.getElementById( "percentage" ); if (evt.lengthComputable) { progressBar.max = evt.total; progressBar.value = evt.loaded; percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%" ; } } </script> |
C#
1
2
3
4
5
6
7
8
9
10
11
12
13
|
[HttpPost] public ActionResult Upload() { HttpFileCollectionBase fileToUpload = Request.Files; foreach ( string file in fileToUpload) { var curFile = Request.Files[file]; if (curFile.ContentLength < 1) continue ; string path = System.IO.Path.Combine(Server.MapPath( "~/Upload" ), System.IO.Path.GetFileName(curFile.FileName)); curFile.SaveAs(path); } return RedirectToAction( "Index" ); } |
jQuery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<script type= "text/javascript" > $(document).ready( function () { $( '#form1' ).submit( function () { var formdata = new FormData(); var fileObj = document.getElementById( "fileToUpload2" ).files; for ( var i = 0; i < fileObj.length; i++) formdata.append( "file" + i, fileObj[i]); $.ajax({ type: 'POST' , url: '/Home/Upload2' , data: formdata, /** *必须false才会自动加上正确的Content-Type */ contentType: false , /** * 必须false才会避开jQuery对 formdata 的默认处理 * XMLHttpRequest会对 formdata 进行正确的处理 */ processData: false }).then( function () { alert( 'done' ); }, function () { //failCal }); return false ; }); $( "#btn" ).bind( "click" , ajaxUpload); }); function ajaxUpload() { $( "#form1" ).submit(); } </script> |