zoukankan      html  css  js  c++  java
  • 使用FormData,进行Ajax请求并上传文件

    注意FormData并不支持IE9以下浏览器

    第一种,创建一个空的FormData对象,然后使用append()方法向该对象里添加字段

    var oMyForm = new FormData();
    oMyForm.append("username", "Groucho");
    oMyForm.append("accountnum", 123456); 
    oMyForm.append("file", $('#file')[0].files[0]);
    
    $.ajax({
        url: '/Manage/UploadImg',
        type: 'POST',
        cache: false,
        data: oMyForm,
        processData: false,
        contentType: false,
        async: false
    }).done(function(res) {}).fail(function(res) {});

    第二种,使用HTML表单来初始化一个FormData对象

    HTML部分

    <form id= "uploadForm">  
          <p >指定文件名: <input type="text" name="filename" value= ""/></p >  
          <p >上传文件: <input type="file" name="file"/></ p>  
          <input type="button" value="上传" onclick="doUpload()" />  
    </form>  

    JS部分

    function doUpload() {  
         var formData = new FormData($( "#uploadForm" )[0]);
         formData.append('num', '1');//可以在已有表单数据的基础上,继续添加新的键值对
         $.ajax({  
              url: 'http://localhost/file/upload' ,  
              type: 'POST',  
              data: formData,  
              async: false,  
              cache: false,  
              contentType: false,  
              processData: false,  
              success: function (returndata) {  
                  alert(returndata);  
              },  
              error: function (returndata) {  
                  alert(returndata);  
              }  
         });  
    } 

     注:

    • processData设置为false。因为data值是FormData对象,不需要对数据做处理。
    • cache设置为false,上传文件不需要缓存
    • contentType设置为false
  • 相关阅读:
    CF995A Tesla
    CF961D Pair Of Lines
    P1186 玛丽卡
    CF986B Petr and Permutations
    hdu6331 Problem M. Walking Plan
    Edison UVALive3488
    Be a Smart Raftsman SGU475
    100198H Royal Federation
    100197G Robbers
    Evil Book -- CodeChef
  • 原文地址:https://www.cnblogs.com/wangdahai/p/6845719.html
Copyright © 2011-2022 走看看