使用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();}); });
你可以选择第三方插件来上传你的多个文件到服务器
我推荐的几个是
-
uploadify
多文件上传。
进度条
文件上传成功后该怎么做
图片预览
我使用了下面的函数来上传
$.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>
就像Dickens建议的那样,但代码的格式略有不同:
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);
});
相关文章:
- 如何在php文件中获取$.post-ajax传递的值
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- 通过Ajax将JavaScript函数传递给PHP文件
- Ajax文件加载和<输入>文件加载
- 正在传递JSONP标头's数据参数到另一个文件中的AJAX请求
- 通过ajax到php文件获取单选按钮值
- 在样板文件中实现Ajax
- AJAX不会在文件上传后重定向到网页-POST方法
- 如何在 AJAX JQuQudy中对文件上传进行排队
- 使用ajax下载与存储名称不同名称的文件
- Ajax调用返回当前html页面,而不是请求的文件
- 在更改名称时,使用ajax jsp在下拉菜单中填充多个文件夹的数据
- AJAX上传文件不起作用
- 使用AJAX将文件上载到服务器
- 使用ajax上传的文件返回错误,但使用c#在asp.net的服务器端正常提交的文件
- AJAX在Django的外部JS文件中发布
- YUI向json文件发出ajax请求
- WebApp 读取文本文件 Ajax、HTTPrequest 或
- Magento:无法运行数据流配置文件:Ajax 错误(未捕获的类型错误:e 不是函数)
- 如何使用链接检索整个数据文件(ajax?)