ITPub博客

首页 > IT职业 > IT生活 > 怎么用异步ajax提交表单来上传图片文件?

怎么用异步ajax提交表单来上传图片文件?

IT生活 作者:castlight 时间:2021-09-09 09:22:31 0 删除 编辑

通常我们提交(使用submit button)时,会把form中的所有表格元素的name与value组成一个queryString,提交到后台。这用jQuery的方法来说,就是serialize。


通过$('#postForm').serialize()可以对form表单进行序列化,从而将form表单中的所有参数传递到服务端。 但是上述方式,只能传递一般的参数,上传文件的文件流是无法被序列化并传递的。不过如今主流浏览器都开始支持一个叫做FormData的对象,有了这个FormData,我们就可以轻松地使用Ajax方式进行文件上传

1.html

html>    图片上传测试   
      
   <!--  -->  

2.php服务端处理接收

打印出结果

success------------ (index):39 array(5) {   ["name"]=>   string(6) "dd.jpg"   ["type"]=>   string(10) "image/jpeg"   ["tmp_name"]=>   string(24) "C:xampptmpphp1722.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也可以

原文出处


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/1470/viewspace-2802813/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-15

  • 博文量
    102
  • 访问量
    1240