如何使用ajax jquery上传多个图像上传而无需提交按钮？有人可以帮助我找出错误吗？
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
这是代码
<body>
<input name="files[]" type="file" multiple />
<input type="hidden" name="hiddenval" id="hiddenval" value="">
<button id="upload" value="Upload" class="btn btn-success" />
</body>
</html>
<script>
$(document).on("click", "#upload", function() {
var outputdata = [];
$.ajax({
url: "upload1.PHP",
type: "POST",
data: new Form(this),
contentType: false,
processData: false,
success: function(files, data, xhr) {
outputdata.push(files);
$('#hiddenval').val(outputdata)
}
});
});
</script>
解决方法:
<input name="files[]" type="file" multiple id="files"/>
包括此输入到数据的值：
$(document).on("click", "#upload", function() {
var outputdata = [];
var fileSelect = document.getElementById('files');
var files = fileSelect.files;
var formData = new FormData();
// Loop through each of the selected files.
for (var i = 0; i < files.length; i++) {
var file = files[i];
// Check the file type.
if (!file.type.match('image.*')) {
continue;
}
// Add the file to the request.
formData.append('photos[]', file, file.name);
}
$.ajax({
url: "upload1.PHP",
type: "POST",
data: formData,
contentType: false,
processData:false,
success: function(files,data,xhr)
{
outputdata.push(files);
$('#hiddenval').val(outputdata);
}
});
});
参见：http://blog.teamtreehouse.com/uploading-files-ajax
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
