我正在創建一個JSP/Servlet Web應用程序，我希望通過Ajax將一個文件上傳到servlet。我該怎么做呢？我正在使用jQuery。到目前為止，我已經做了如下工作：<form class="upload-box">
<input type="file" id="file" name="file1" />
<span id="upload-error" class="error" />
<input type="submit" id="upload-button" value="upload" /></form>使用這個jQuery：$(document).on("#upload-button", "click", function() {
$.ajax({
type: "POST",
url: "/Upload",
async: true,
data: $(".upload-box").serialize(),
contentType: "multipart/form-data",
processData: false,
success: function(msg) {
alert("File has been uploaded successfully");
},
error:function(msg) {
$("#upload-error").html("Couldn't upload file");
}
});});但是，它似乎沒有發送文件內容。
3 回答
溫溫醬
TA貢獻1752條經驗 獲得超4個贊
XMLHttpRequestXMLHttpRequest<iframe>
<form id="upload-form" class="upload-box" action="/Upload" method="post" enctype="multipart/form-data">
<input type="file" id="file" name="file1" />
<span id="upload-error" class="error">${uploadError}</span>
<input type="submit" id="upload-button" value="upload" /></form><script src="jquery.js"></script><script src="jquery.form.js"></script><script>
$(function() {
$('#upload-form').ajaxForm({
success: function(msg) {
alert("File has been uploaded successfully");
},
error: function(msg) {
$("#upload-error").text("Couldn't upload file");
}
});
});</script>X-Requested-WithXMLHttpRequest
if ("XMLHttpRequest".equals(request.getHeader("X-Requested-With"))) {
// Return ajax response (e.g. write JSON or XML).} else {
// Return regular response (e.g. forward to JSP).}XMLHttpRequestFileFormData
慕萊塢森
TA貢獻1810條經驗 獲得超4個贊
這段代碼對我來說很好：
$('#fileUploader').on('change', uploadFile);
function uploadFile(event)
{
event.stopPropagation();
event.preventDefault();
var files = event.target.files;
var data = new FormData();
$.each(files, function(key, value)
{
data.append(key, value);
});
postFilesData(data);
}
function postFilesData(data)
{
$.ajax({
url: 'yourUrl',
type: 'POST',
data: data,
cache: false,
dataType: 'json',
processData: false,
contentType: false,
success: function(data, textStatus, jqXHR)
{
//success
},
error: function(jqXHR, textStatus, errorThrown)
{
console.log('ERRORS: ' + textStatus);
}
});
}
<form method="POST" enctype="multipart/form-data">
<input type="file" name="file" id="fileUploader"/>
</form>
- 3 回答
- 0 關注
- 984 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消