Ajax简单实现文件异步上传的多种方法

   <p>1. 认识FormData对象</p>    <blockquote>     <p>FormData是Html5新加进来的一个类,可以模拟表单数据</p>    </blockquote>    <table>     <thead>      <tr>       <th>构造函数</th>       <th>解释</th>      </tr>     </thead>     <tbody>      <tr>       <td>FormData (optional HTMLFormElement form)</td>       <td>(可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.</td>      </tr>     </tbody>    </table>    <h2>方法</h2>    <p>void append(DOMString name, DOMString value)</p>    <ul>     <li>name 表单元素名称</li>     <li>value 表单元素要传递的值</li>    </ul>    <pre>  <code class="language-javascript"><form name="myForm"  enctype="multipart/form-data">      <input type="text" name="userName">      <input type="file" name="img">      <input type="button" id="btn" value="submit">  </form></code></pre>    <p>2. 使用javascript简单实现</p>    <pre>  <code class="language-javascript">function upload() {      var userName = document.myForm.userName.value;      var img = document.myForm.img.files[0];      var fm = new FormData();      fm.append('userName', userName);      fm.append('img', img);        var request = new XMLHttpRequest();      request.open('POST', 'submitform.php');      request.send(fm);  }</code></pre>    <p>3. 使用Ajax实现</p>    <pre>  <code class="language-javascript">$('#btn').click(function () {      var userName = document.myForm.userName.value;      var img = document.myForm.img.files[0];        var fm = new FormData();      fm.append('userName', userName);      fm.append('img', img);      $.ajax(          {              url: 'submitform.php',              type: 'POST',              data: fm,              contentType: false, //禁止设置请求类型              processData: false, //禁止jquery对DAta数据的处理,默认会处理              //禁止的原因是,FormData已经帮我们做了处理              success: function (result) {                  //测试是否成功                  //但需要你后端有返回值                  alert(result);              }          }      );  });</code></pre>    <p>4. ajaxfileupload.js插件实现Ajax文件上传</p>    <pre>  <code class="language-javascript">function upload(){  $.ajaxFileUpload({          url: 'a.php', //用于文件上传的服务器端请求地址          secureuri: false, //一般设置为false          fileElementId: 'file', //文件上传空间的id属性            dataType: 'HTML', //返回值类型 一般设置为json          success: function (data, status)  //服务器成功响应处理函数          {                              $("#img1").attr("src", data);              addI(data);          },          error: function (data, status, e)//服务器响应失败处理函数          {              alert(e);          }      }     );  }</code></pre>    <ul>     <li>对于PHP就可以使用Files全局数组拿到文件属性,POST全局数组拿到userName的值</li>    </ul>    <p><br> 来自：http://www.jianshu.com/p/d90d2e6bb0d5<br>  </p>