使用 jQuery Ajax 上传文件
Posted
技术标签:
【中文标题】使用 jQuery Ajax 上传文件【英文标题】：Uploading file with jQuery Ajax 【发布时间】：2013-08-28 01:06:16 【问题描述】：我对如何使用 Ajax 从表单上传文件进行了多次搜索，发现 xhr2 应该可以做到。然而，我已经尝试过自己使用 FormData 对象，但它不起作用。
这是一个简单的html表单
<!DOCTYPE html>
<html>
<head>
<title>File Upload</title>
</head>
<body>
<form id="form" method="post" action="post.php" enctype="multipart/form-data">
<input type="file" name="img"/>
<input type="submit" value="Upload" />
</form>
<script src="jquery.js"></script>
<script src="upload.js"></script>
</body>
</html>
这里的“post.php”文件在以“老式”方式调用时工作得很好：
<?php
if($_FILES['img']['error'] > 0) die('Error ' . $_FILES['file']['error']);
if(empty($_FILES['img']['name'])) die('No file sent.');
$tmp = $_FILES['img']['tmp_name'];
if(is_uploaded_file($tmp))
if(!move_uploaded_file($tmp, 'img.png')) echo 'error !';
else echo 'Upload failed !';
?>
这里是“upload.js”
$(function()
$('#form').submit(function(e)
e.preventDefault();
data = new FormData($('#form'));
console.log('Submitting');
$.ajax(
type: 'POST',
url: 'post.php',
data: data,
cache: false,
contentType: false,
processData: false
).done(function(data)
console.log(data);
).fail(function(jqXHR,status, errorThrown)
console.log(errorThrown);
console.log(jqXHR.responseText);
console.log(jqXHR.status);
);
);
);
你知道为什么它不工作吗？控制台返回“未发送文件”。
非常感谢！
【问题讨论】：
【参考方案1】：尝试替换代码：
data = new FormData($('#form'));
用这个：
data = new FormData($('#form')[0]);
从 jQuery 数组中获取第一个 DOM 元素。
【讨论】：
以上是关于使用 jQuery Ajax 上传文件的主要内容，如果未能解决你的问题，请参考以下文章