关于php：使用jQuery上传文件

ajaxhtmljqueryphpupload

Uploading a file with jQuery

本问题已经有最佳答案，请猛点这里访问。

我有一个关于用Ajax上传文件的问题。如何向$.ajax()提交文件没有特殊的JS插件？：

1
2
3
4
5

<form action="javascript:return false;">
<input type="text" id="name" />
<input type="file" id="myfile" />
<input type="button" id="submitbutton" value="submit" />
</form>

这是jquery小代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script type="text/javascript">
$(document).ready(function() {
$('#submitbutton').click(function() {
$.ajax({
type: 'POST',
dataType: 'json',
enctype: 'multipart/form-data',
url: 'upload.php',
async: false,
data: {
'name': $('#name').val(),
'myfile': $('#myfile').val()
},
success: function(data) {
alert(data.msg);
}
});
});
});

和upload.php文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
$name = isset($_POST['name']) ? $_POST['name'] : '';
if (isset($_FILES) && isset($_FILES["file"])) {
$files = $_FILES['file'];
$error = isset($files["error"]) ? $files["error"] : '';
$fname = isset($files["name"]) ? $files["name"] : '';
$type = isset($files["type"]) ? $files["type"] : '';
$size = isset($files["size"]) ? $files["size"] : '';
$tmp_name = isset($files["tmp_name"]) ? $files["tmp_name"] : '';
return array('msg' =>"Hello, $name!
Your file data:
Err: $error, Name: $fname, Type: $type, Size: $size, Tmp: $tmp_name");
}
echo json_encode(array('msg' => 'create image'));
?>

相关讨论

无法通过Ajax上载文件。您可能需要签出支持文件上载的表单插件：http://jquery.malsup.com/form/

另一种选择是使用iframe,，这是一个教程；

如果您希望跨浏览器工作，那么就不能只使用Ajax。(但这在所有浏览器中都不起作用，您可以在这里查看如何使用xmlhttprequest和jquery上载文件)

对于我来说，最好是使用jquery forms插件。

另一个选项是执行插件手动执行的相同操作。

如下所示：

1
2
3
4
5
6
7

var ifrm = $("<iframe>", {id:"tmp_upload_frame"}).onload(function() {
// do something when response is returned
}).hide();
$("body").append(ifrm);
$("form").prop("target","tmp_upload_frame")
.prop("enctype","multipart/form-data")
.submit();

但是对于我来说，表单插件要好得多，因为它有一个与Ajax接口非常相似的接口，并且为您做了很多不好的工作(比如从iframe检索响应)。