图片上传的几种方式

表单上传:

<form method="post" action="http://uploadUrl" enctype="multipart/form-data">

    <input name="file" type="file" accept="image/gif,image.jpg"/>

    <input name="token" type="hidden"/>

    <input type="submit" value="提交"/>

</form>

要点:

method="post": 采用post方式提交数据

enctype="multipart/form- data":采用multipart格式上传文件,此时request头会显示 Content-Type:multipart/form-data; boundary=—-WebKitFormBoundaryzr34cwJ67R95KQC9

action:标明上传的服务端处理地址

type="file":使用input的file控件上传

Ajax无刷新上传:

提交数据时,用到了FormData对象来发送二进制文件,FormData构造函数提供的append()方法,除了直接添加二进制文件还可以附带一些其它的参数

ajax请求记得加这几个参数  

cache:false,

processData:false,

contentType:false,


//通过FormData构造函数创建一个空对象

var formdata=newFormData();

//可以通过append()方法来追加数据

.append("name","laotie");

//通过get方法对值进行读取

console.log(formdata.get("name"));

//通过set方法对值进行设置

formdata.set("name","laoliu");

Ajax请求必须要写:

processData:false,

contentType:false,

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 最近项目需要使用 Angular,对于初学 Angular 的我只能硬着头皮上了,项目中有一个需求是文件上传,磕磕...
    虽万万人吾往矣阅读 18,349评论 3 20
  • XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以...
    冇得感情阅读 1,069评论 0 0
  • 前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用...
    雷波_viho阅读 834评论 0 1
  • /*----------------- 01 POST上传单个文件 -----------------*/ 重点:...
    蓝心儿的蓝色之旅阅读 2,296评论 0 5
  • 交通治理这么严,早上同事带孩子去艺术中心学琴,摩托车不敢开了。她自己蹬着单车,车尾载着小的,而才九岁的大的...
    南窗竹阅读 156评论 2 2