我已经进行了很多搜索,以了解如何使用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); }); }); });
您知道为什么它不起作用吗?控制台返回“未发送文件”。
非常感谢 !
尝试替换代码:
data = new FormData($('#form'));
有了这个:
data = new FormData($('#form')[0]);
从jQuery数组中获取第一个DOM元素。