网站首页学无止境JS

HTML5 Ajax 方式上传文件

发布时间：2014-09-15 11:25:26编辑：songlin阅读（114）

    用到两个对象

    第一个对象：FormData

    第二个对象：XMLHttpRequest

    目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象，但IE9尚未支持 FormData 对象，还在用IE6 ? 只能仰天长叹....

    有了这两个对象，我们可以真正的实现Ajax方式上传文件。

    示例代码：
     

    1. > 
    2.  
    3. <html> 
    4.  
    5. <head> 
    6.  
    7.     <title>Html5 Ajax 上传文件title> 
    8.  
    9.     <script type="text/javascript"> 
    10.  
    11.  
    12.  
    13.         function UpladFile() { 
    14.  
    15.  
    16.  
    17.             var fileObj = document.getElementByIdx_x_x("file").files[0]; // 获取文件对象 
    18.  
    19.             var FileController = "../file/save";                    // 接收上传文件的后台地址  
    20.  
    21.             
    22.  
    23.             // FormData 对象 
    24.  
    25.             var form = new FormData(); 
    26.  
    27.             form.append("author", "hooyes");                        // 可以增加表单数据 
    28.  
    29.             form.append("file", fileObj);                           // 文件对象 
    30.  
    31.  
    32.  
    33.             // XMLHttpRequest 对象 
    34.  
    35.             var xhr = new XMLHttpRequest(); 
    36.  
    37.             xhr.open("post", FileController, true); 
    38.  
    39.             xhr.onload = function () { 
    40.  
    41.                 alert("上传完成!"); 
    42.  
    43.             }; 
    44.  
    45.             xhr.send(form); 
    46.  
    47.  
    48.  
    49.         } 
    50.  
    51. script> 
    52.  
    53. head> 
    54.  
    55. <body> 
    56.  
    57. <input type="file" id="file" name="myfile" /> 
    58.  
    59. <input type="button" onclick="UpladFile()" value="上传" /> 
    60.  
    61. body> 
    62.  
    63. html> 

    很简洁的代码，便可以达到Ajax方式上传文件，上面的代码中使用<input type="file" />这种传统的选择文件的方法产生文件对象，HTML5还支持使用多种更灵活的方式，如拖拽文件到指定的元素上产生。

    Ajax已成功上传文件，但这时我们会想到一个问题，如何显示进度条?带着这个问题，脑子会想到，Flash? 浏览器插件?。

    NO,现在不需要这些东西了。

    开始着手，先做一个进度条，进度条也很简单，使用HTML5 新加的标签：
     

    1. <progress id="progressBar" value="0" max="100"> progress> 

    这个在浏览器中便会呈现了一个进度条，现在我们要做的就是在上传的时候，实时的去改变它的Value值，然后进度显示的问题便交给它了。

    我们的服务器端无需修改，只需要在JS中XHR对象加一个事件。
     

    1. xhr.upload.addEventListener("progress", progressFunction, false) 

    progressFunction 被调用的时候会传进一个事件对象，这个对象有两个属性，一个就是loaded 一个是total ，分别代表，已上传的值，和总要上传的值。

    这正是我们需要的，所以这个方法，可以这样写：
     

    1. function progressFunction(evt) { 
    2.  
    3.             var progressBar = document.getElementByIdx_x_x("progressBar"); 
    4.  
    5.             if (evt.lengthComputable) { 
    6.  
    7.                 progressBar.max = evt.total;       
    8.  
    9.                 progressBar.value = evt.loaded; 
    10.     } 
    11.  
    12.  } 

    这样便可以完成，上传进度显示了。

    如下针对上面的第一个示例代码，做一个调整：

    示例代码2，带进度显示：
     

    1. > 
    2.  
    3. <html> 
    4.  
    5. <head> 
    6.  
    7.     <title>Html5 Ajax 上传文件title> 
    8.  
    9.     <script type="text/javascript"> 
    10.  
    11.         function UpladFile() { 
    12.  
    13.             var fileObj = document.getElementByIdx_x_x("file").files[0]; // js 获取文件对象 
    14.  
    15.             var FileController = "../file/save";                    // 接收上传文件的后台地址  
    16.  
    17.  
    18.  
    19.             // FormData 对象 
    20.  
    21.             var form = new FormData(); 
    22.  
    23.             form.append("author", "hooyes");                        // 可以增加表单数据 
    24.  
    25.             form.append("file", fileObj);                           // 文件对象 
    26.  
    27.  
    28.  
    29.             // XMLHttpRequest 对象 
    30.  
    31.             var xhr = new XMLHttpRequest(); 
    32.  
    33.             xhr.open("post", FileController, true); 
    34.  
    35.             xhr.onload = function () { 
    36.  
    37.                // alert("上传完成!"); 
    38.  
    39.             }; 
    40.  
    41.             xhr.upload.addEventListener("progress", progressFunction, false); 
    42.  
    43.              
    44.  
    45.             xhr.send(form); 
    46.  
    47.  
    48.  
    49.         } 
    50.  
    51.         function progressFunction(evt) { 
    52.  
    53.             var progressBar = document.getElementByIdx_x_x("progressBar"); 
    54.  
    55.             var percentageDiv = document.getElementByIdx_x_x("percentage"); 
    56.  
    57.             if (evt.lengthComputable) { 
    58.  
    59.                 progressBar.max = evt.total; 
    60.  
    61.                 progressBar.value = evt.loaded; 
    62.  
    63.                 percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%"; 
    64.  
    65.             } 
    66.  
    67.         }   
    68.  
    69.     script> 
    70.  
    71. head> 
    72.  
    73. <body> 
    74.  
    75.     <progress id="progressBar" value="0" max="100"> 
    76.  
    77.     progress> 
    78.  
    79.     <span id="percentage">span> 
    80.  
    81.     <br /> 
    82.  
    83.     <input type="file" id="file" name="myfile" /> 
    84.  
    85.     <input type="button" onclick="UpladFile()" value="上传" /> 
    86.  
    87. body> 
    88.  
    89. html> 

    后台接收文件的程序可以是任何语言(C#,PHP,Python 等)编写的，上述例子使用C#

    很简单，无需为这个进度条做任何改动。
     

    1. var flist = Request.Files; 
    2.             for (int i = 0; i < flist.Count; i++) { 
    3.  
    4.                 string FilePath = "E:\\hooyes\\Files\\"; 
    5.  
    6.                 var c = flist[i]; 
    7.  
    8.                 FilePath = Path.Combine(FilePath, c.FileName); 
    9.  
    10.                 c.SaveAs(FilePath); 
    11.  
    12.             } 

     

相关文章