jQuery Ajax文件上传
我可以使用以下jQuery代码使用Ajax请求的post方法执行文件上传吗？
$.ajax({
type: "POST",
timeout: 50000,
url: url,
data: dataString,
success: function (data) {
alert('success');
return false;
}
});
如果可能的话，我是否需要填写“数据”部分？ 这是正确的方式吗？ 我只将文件发布到服务器端。
我一直在谷歌搜索，但我发现是一个插件，而在我的计划中，我不想使用它。 至少现在。
文件上传不可能通过ajax。 您可以上传文件，而无需使用IFrame刷新页面。 你可以在这里查看更多细节
更新：
通过XHR2，支持通过AJAX上传文件。 例如通过FormData对象，但不幸的是它并不是所有/旧浏览器都支持。
FormData支持从以下桌面浏览器版本开始。 IE 10+，Firefox 4.0+，Chrome 7+，Safari 5+，Opera 12+
有关更多详细信息，请参阅MDN链接
通过ajax上传文件不再需要iframe。 我最近自己做了。 看看这些网页：
通过AJAX和jQuery使用HTML5文件上传
http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface
更新了答案并清理了它。 使用getSize函数检查大小或使用getType函数检查类型。 增加了进度条html和css代码。
var Upload = function (file) {
this.file = file;
};
Upload.prototype.getType = function() {
return this.file.type;
};
Upload.prototype.getSize = function() {
return this.file.size;
};
Upload.prototype.getName = function() {
return this.file.name;
};
Upload.prototype.doUpload = function () {
var that = this;
var formData = new FormData();
// add assoc key values, this will be posts values
formData.append("file", this.file, this.getName());
formData.append("upload_file", true);
$.ajax({
type: "POST",
url: "script",
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', that.progressHandling, false);
}
return myXhr;
},
success: function (data) {
// your callback here
},
error: function (error) {
// handle error
},
async: true,
data: formData,
cache: false,
contentType: false,
processData: false,
timeout: 60000
});
};
Upload.prototype.progressHandling = function (event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
var progress_bar_id = "#progress-wrp";
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
// update progressbars classes so it fits your code
$(progress_bar_id + " .progress-bar").css("width", +percent + "%");
$(progress_bar_id + " .status").text(percent + "%");
};
如何使用Upload类
//Change id to your id
$("#ingredient_file").on("change", function (e) {
var file = $(this)[0].files[0];
var upload = new Upload(file);
// maby check size or type here with upload.getSize() and upload.getType()
// execute upload
upload.doUpload();
});
Progressbar html代码
<div id="progress-wrp">
<div class="progress-bar"></div>
<div class="status">0%</div>
</div>
进度条CSS代码
#progress-wrp {
border: 1px solid #0099CC;
padding: 1px;
position: relative;
height: 30px;
border-radius: 3px;
margin: 10px;
text-align: left;
background: #fff;
box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}
#progress-wrp .progress-bar {
height: 100%;
border-radius: 3px;
background-color: #f39ac7;
width: 0;
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}
#progress-wrp .status {
top: 3px;
left: 50%;
position: absolute;
display: inline-block;
color: #000000;
}
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对象，它是空的或者来自（序列化？ - $('#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
));
}