怎么用异步ajax提交表单来上传图片文件？
标签：
JavaScript
通常我们提交（使用submit button）时，会把form中的所有表格元素的name与value组成一个queryString，提交到后台。这用jQuery的方法来说，就是serialize。
通过$('#postForm').serialize()可以对form表单进行序列化，从而将form表单中的所有参数传递到服务端。 但是上述方式，只能传递一般的参数，上传文件的文件流是无法被序列化并传递的。不过如今主流浏览器都开始支持一个叫做FormData的对象，有了这个FormData，我们就可以轻松地使用Ajax方式进行文件上传
1.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片上传测试</title> </head> <body> <form id="form" action="" method="post" enctype="multipart/form-data"> <input type="text" name="ss" value="kk"> <input type="text" value="kk"> <input type="text" value="kk"> <input type="file" name="img" value id="b"> <input type="button" id="submit" value="点击提交"> </form> </body> </html> <!-- <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/zepto.min.js"></script> --> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/jquery-3.1.1.min.js"></script> <script> $(function(){ console.log($); $("#submit").click(function(){ var data = new FormData($("#form")[0]); console.log(data); $.ajax({ type:'post', url:'addImg_do.php', data:data, processData: false, contentType: false, success:function(res){ console.log('success------------'); console.log(res); } }); }); }) </script>2.php服务端处理接收
<?php @$dd = $_REQUEST['ss'] or die ('{"code":204,"msg":"ss is required"}'); $src = $_FILES['img']; var_dump($src); var_dump($dd); // $name = $_FILES['img']['name']; ?>打印出结果
success------------ (index):39 array(5) { ["name"]=> string(6) "dd.jpg" ["type"]=> string(10) "image/jpeg" ["tmp_name"]=> string(24) "C:\xampp\tmp\php1722.tmp" ["error"]=> int(0) ["size"]=> int(41364) } string(2) "kk"processData: false, contentType: false,
这两个参数不能少一个。
form中必须要有:enctype="multipart/form-data",input中type设置为file
表单中enctype="multipart/form-data"的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，才能完整的传递文件数据，进行下面的操作.
enctype="multipart/form-data"是上传二进制数据; form里面的input的值以2进制的方式传过去。
另外：这里使用JQuery，但是老版本的JQuery比如1.2是不支持的，最好使用2.0以上或更新版本：
zepto.js也可以
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦