Ajax 文件上传

使用ajax提交form表单，包括ajax文件上传

通过jQuery来使用FormData对象

 

var formData = new FormData();

formData.append("uploadFile", $("#uploadFile")[0].files[0]);

$.ajax({

    cache : false,

    url : "...",

    type : 'POST',

    data : formData,

    processData : false, // 告诉jQuery不要去处理发送的数据

    contentType : false, // 告诉jQuery不要去设置Content-Type请求头（不设置内容类型）

    success : function(msg) {

        var result = JSON.parse(msg).result;

        var resultText = JSON.parse(msg).resultText;

    },

    error : function(msg) {

        showMessage("操作失败！" + JSON.stringify(msg));

    }

});

 

jsp代码

<div id="uploadDialog" style="display:none">

<p> <s:file id="uploadFile" name ="uploadFile" style="width: 160px"></s:file>  </p>

</div>

 

备注：

ajax中设置属性

processData: false,  // 不处理数据

contentType: false   // 不设置内容类型

 

处理返回数据时需要用JSON.parse(msg)解析

 

action返回时

Map<String, String> returnMap = new HashMap<>();

returnMap.put("result", returnResult);

eturnMap.put("resultText", responseText);

try {

    //response.setContentType("text/xml;charset=UTF-8");   (这行加上会直接返回error)

    response.setHeader("Cache-Control", "no-cache");

    response.getWriter().print(JsonUtil.toJson(returnMap));

    response.getWriter().close();

} catch (IOException e) {

    e.printStackTrace();

}

 

还可以通过下面初始化formData 

var formElement = document.querySelector("form");

var formData = new FormData(formElement);

 

formData 可以通过append添加属性

var formData = new FormData();

formData.append("username", "Groucho");

formData.append("accountnum", 123456); // 数字 123456 会被立即转换成字符串 "123456"

// HTML 文件类型input，由用户选择

formData.append("userfile", fileInputElement.files[0]);

// JavaScript file-like 对象

var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...

var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);