我可以使用以下jQuery代码使用ajax请求的POST方法执行文件上载吗？
$.ajax({
type: "POST",
timeout: 50000,
url: url,
data: dataString,
success: function (data) {
alert('success');
return false;
}
});
如果可能，我需要填写数据部分吗？这是正确的方式吗？我只将文件POST到服务器端。
我一直在搜索，但我发现的是一个插件，而在我的计划中，我不想使用它。至少目前是这样。
当前回答
您可以使用ajaxSubmit方法，如下所示：）当您选择需要上传到服务器的文件时，表单将提交到服务器：）
$(document).ready(function () {
var options = {
target: '#output', // target element(s) to be updated with server response
timeout: 30000,
error: function (jqXHR, textStatus) {
$('#output').html('have any error');
return false;
}
},
success: afterSuccess, // post-submit callback
resetForm: true
// reset the form after successful submit
};
$('#idOfInputFile').on('change', function () {
$('#idOfForm').ajaxSubmit(options);
// always return false to prevent standard browser submit and page navigation
return false;
});
});
其他回答
Ajax发布和上传文件是可能的。我使用jQuery$.ajax函数加载文件。我尝试使用XHR对象，但无法在服务器端使用PHP获得结果。
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url : 'upload.php',
type : 'POST',
data : formData,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success : function(data) {
console.log(data);
alert(data);
}
});
如您所见，您必须创建一个FormData对象，该对象为空或来自（serialized？-$（'#yourForm'）.serialize（））现有表单，然后附加输入文件。
以下是更多信息：-如何使用jQuery.ajax和FormData上载文件-通过jQuery上载文件，提供对象FormData，没有文件名，GET请求
对于PHP进程，您可以使用以下内容：
//print_r($_FILES);
$fileName = $_FILES['file']['name'];
$fileType = $_FILES['file']['type'];
$fileError = $_FILES['file']['error'];
$fileContent = file_get_contents($_FILES['file']['tmp_name']);
if($fileError == UPLOAD_ERR_OK){
//Processes your file here
}else{
switch($fileError){
case UPLOAD_ERR_INI_SIZE:
$message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
break;
case UPLOAD_ERR_FORM_SIZE:
$message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
break;
case UPLOAD_ERR_PARTIAL:
$message = 'Error: no terminó la acción de subir el archivo.';
break;
case UPLOAD_ERR_NO_FILE:
$message = 'Error: ningún archivo fue subido.';
break;
case UPLOAD_ERR_NO_TMP_DIR:
$message = 'Error: servidor no configurado para carga de archivos.';
break;
case UPLOAD_ERR_CANT_WRITE:
$message= 'Error: posible falla al grabar el archivo.';
break;
case UPLOAD_ERR_EXTENSION:
$message = 'Error: carga de archivo no completada.';
break;
default: $message = 'Error: carga de archivo no completada.';
break;
}
echo json_encode(array(
'error' => true,
'message' => $message
));
}
$（“#form id”）.submit（函数（e）{e.预防违约（）；});$（“#form id”）.submit（函数（e）{var formObj=$（此）；var formURL=formObj.attr（“操作”）；var formData=新的formData（this）；$.ajax美元({url:formURL，类型：'POST'，data:formData，processData:false，contentType：false，异步：true，缓存：false，enctype:“multipart/form data”，dataType:“json”，成功：函数（数据）{if（data.success）{警报（data.success）} if（data.error）{警报（data.error）} }});});<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js“></script><form class=“form horizontal”id=“form id”action=“masterFileController”enctype=“multipart/form data”><button class=“btn success btn”type=“submit”id=“btn save”>提交</button></form>
servlet响应为“out.print（“您的响应”）；”
使用FormData。它工作得很好：-）。。。
var jform = new FormData();
jform.append('user',$('#user').val());
jform.append('image',$('#image').get(0).files[0]); // Here's the important bit
$.ajax({
url: '/your-form-processing-page-url-here',
type: 'POST',
data: jform,
dataType: 'json',
mimeType: 'multipart/form-data', // this too
contentType: false,
cache: false,
processData: false,
success: function(data, status, jqXHR){
alert('Hooray! All is well.');
console.log(data);
console.log(status);
console.log(jqXHR);
},
error: function(jqXHR,status,error){
// Hopefully we should never reach here
console.log(jqXHR);
console.log(status);
console.log(error);
}
});
您可以使用ajaxSubmit方法，如下所示：）当您选择需要上传到服务器的文件时，表单将提交到服务器：）
$(document).ready(function () {
var options = {
target: '#output', // target element(s) to be updated with server response
timeout: 30000,
error: function (jqXHR, textStatus) {
$('#output').html('have any error');
return false;
}
},
success: afterSuccess, // post-submit callback
resetForm: true
// reset the form after successful submit
};
$('#idOfInputFile').on('change', function () {
$('#idOfForm').ajaxSubmit(options);
// always return false to prevent standard browser submit and page navigation
return false;
});
});
如许多答案所示，使用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");
}
});
});
