我可以使用以下jQuery代码使用ajax请求的POST方法执行文件上载吗？
$.ajax({
type: "POST",
timeout: 50000,
url: url,
data: dataString,
success: function (data) {
alert('success');
return false;
}
});
如果可能，我需要填写数据部分吗？这是正确的方式吗？我只将文件POST到服务器端。
我一直在搜索，但我发现的是一个插件，而在我的计划中，我不想使用它。至少目前是这样。
当前回答
这是我的代码
var formData = new FormData();
var files = $('input[type=file]');
for (var i = 0; i < files.length; i++) {
if (files[i].value == "" || files[i].value == null) {
return false;
}
else {
formData.append(files[i].name, files[i].files[0]);
}
}
var formSerializeArray = $("#Form").serializeArray();
for (var i = 0; i < formSerializeArray.length; i++) {
formData.append(formSerializeArray[i].name, formSerializeArray[i].value)
}
$.ajax({
type: 'POST',
data: formData,
contentType: false,
processData: false,
cache: false,
url: '/Controller/Action',
success: function (response) {
if (response.Success == true) {
return true;
}
else {
return false;
}
},
error: function () {
return false;
},
failure: function () {
return false;
}
});
其他回答
使用XMLHttpRequest（）确实可以进行AJAX上载。无需iframes。可以显示上载进度。
有关详细信息，请参阅：答案https://stackoverflow.com/a/4943774/873282对jQuery Upload Progress和AJAX文件上传提出质疑。
以下是我如何做到这一点：
HTML
<input type="file" id="file">
<button id='process-file-button'>Process</button>
JS
$('#process-file-button').on('click', function (e) {
let files = new FormData(), // you can consider this as 'data bag'
url = 'yourUrl';
files.append('fileName', $('#file')[0].files[0]); // append selected file to the bag named 'file'
$.ajax({
type: 'post',
url: url,
processData: false,
contentType: false,
data: files,
success: function (response) {
console.log(response);
},
error: function (err) {
console.log(err);
}
});
});
PHP
if (isset($_FILES) && !empty($_FILES)) {
$file = $_FILES['fileName'];
$name = $file['name'];
$path = $file['tmp_name'];
// process your file
}
var dataform = new FormData($("#myform")[0]);
//console.log(dataform);
$.ajax({
url: 'url',
type: 'POST',
data: dataform,
async: false,
success: function(res) {
response data;
},
cache: false,
contentType: false,
processData: false
});
使用隐藏的iframe并将表单的目标设置为该iframe的名称。这样，当提交表单时，只会刷新iframe。为iframe的加载事件注册一个事件处理程序，以解析响应。
如许多答案所示，使用FormData是一种方法。这里有一些代码非常适合这个目的。我也同意嵌套ajax块以完成复杂环境的意见。通过包括e.PreventDefault（）；根据我的经验，使代码更易于跨浏览器兼容。
$('#UploadB1').click(function(e){
e.preventDefault();
if (!fileupload.valid()) {
return false;
}
var myformData = new FormData();
myformData.append('file', $('#uploadFile')[0].files[0]);
$("#UpdateMessage5").html("Uploading file ....");
$("#UpdateMessage5").css("background","url(../include/images/loaderIcon.gif) no-repeat right");
myformData.append('mode', 'fileUpload');
myformData.append('myid', $('#myid').val());
myformData.append('type', $('#fileType').val());
//formData.append('myfile', file, file.name);
$.ajax({
url: 'include/fetch.php',
method: 'post',
processData: false,
contentType: false,
cache: false,
data: myformData,
enctype: 'multipart/form-data',
success: function(response){
$("#UpdateMessage5").html(response); //.delay(2000).hide(1);
$("#UpdateMessage5").css("background","");
console.log("file successfully submitted");
},error: function(){
console.log("not okay");
}
});
});
