使用 AJAX 上傳多個文件
[英]Multiple files upload using AJAX
問題描述
我正在開發一個 web 應用程序並且我正在使用多個文件上傳，但它不適用於 AJAX。 對於多個文件上傳，我使用運行良好的 Apache FileUpload，但在使用 Ajax 后，ServletFileUpload.isMultipartContent() 返回 False。
謝謝你的幫助
這是我的 JSP 代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Envoi des fichiers RNP</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/fileupload.js"></script>
<link type="text/css" rel="stylesheet" href="css/form.css">
</head>
<body>
<form id="myForm" >
<fieldset>
<legend>Envoi de fichier</legend>
<label for="fichier">Emplacement du premier fichier <span class="requis">*</span></label>
<input type="file" id="fichier" name="fichiers[]" multiple value="<c:out value="${fichier.nom}"/>"/>
<span class="erreur">${form.erreurs['fichier']}</span>
<br />
<br />
<input type="submit" value="Envoyer" id="showTable"/>
<br />
</fieldset>
</form>
<div id="tablediv">
<table cellspacing="0" id="site2G">
<tr>
<th scope="col">CGI</th>
<th scope="col">BSC</th>
<th scope="col">Site Name</th>
<th scope="col">Cells</th>
<th scope="col">EA</th>
</tr>
</table>
</div>
</body>
</html>
和我的 AJAX 代碼：
$(document).ready(function() {$("#tablediv").hide();
$("#myForm").submit(function(event){
event.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: "Upload",
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function(responseJson) {
if(responseJson!=null){
$("#site2G").find("tr:gt(0)").remove();
var table1 = $("#site2G");
$.each(responseJson, function(key,value) {
var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td></tr>");
rowNew.children().eq(0).text(value['bsc']);
rowNew.children().eq(1).text(value['sitename']);
rowNew.children().eq(2).text(value['cells']);
rowNew.children().eq(3).text(value['cgi']);
rowNew.children().eq(4).text(value['ea']);
rowNew.appendTo(table1);
});
}
}
});
$("#tablediv").show();}); });
3 個解決方案
解決方案1
1 已采納 2015-07-23 09:57:24
解決方案2
0 2015-07-23 10:04:50
我使用以下功能進行上傳
$.upload = function(url, form, _callback) {
$.ajax({
url: url,
type: "POST",
processData:false,
cache: false,
async: true,
data: form,
contentType: false,
success:function(data, textStatus, request){
if(typeof _callback == "function")
_callback.call(this, data);
},
error:function(data, textStatus, request){
if(typeof _callback == "function")
_callback.call(this, data);
}
});
};
調用這個函數
var formData = new FormData();
for(var i=0;i<$("#upload #file").get(0).files.length;i++)
formData.append("file" + i, $("#upload #file").get(0).files[i]);
$.upload("Upload", formData, function(data){
//success or failure check
});
你的 HTML 是
<form id="upload" style="display:none">
<input name="file" id="file" type="file" multiple />
</form>
解決方案3
0 2021-01-27 09:07:11
就像狄更斯提出的那樣，但代碼的格式略有不同：
var formData = new FormData();
var $uploader = $("#FileUpload_doc")[0];
for (let i = 0; i < $uploader.files.length; i++)
formData.append("file_" + i, $uploader.files[i]);
$.ajax({
url: 'your url here',
processData: false,
contentType: false,
data: formData,
type: 'POST'
}).done(function (dataReceived) {
// do another things here
}).fail(function (a, b, c) {
alert(a, b, c);
});
使用ajax上傳多個文件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.