通过Ajax方式上传文件,使用FormData进行Ajax请求。上传文件或图片时,要求的格式为enctype ="multipart/form-data"(以二进制格式上传),在使用ajax上传时需要注意。

html代码:

js代码:

当上传完成,我们可以拿到控制台的信息:

Content-Type:multipart/form-data

注意:我们在使用data:formData 传数据时,不能写为 data:{data:formData}这种键值对的格式,这样后台拿到的数据就不再是 multipart/form-data 。个人认为可能的原因是,如果也成键值对的格式,那么ajax会去解析这个数据,这样就把原来的multipart/form-data 格式解析为普通的json格式,因此不能写为键值对的方式传输。

后台那数据时,要通过input的name来拿。

ajax上传图片到服务器的更多相关文章

  1. 使用Ajax上传图片到服务器(不刷新页面)

    有时候我们需要上传图片时不刷新页面,那么Ajax就是很好的东西哦.之前在网上找了很多的资料都不对,不是这里就是那里错,这是本人亲自测试了的哈,是没有问题的,若有不足之处希望指正.我用的.net,对了这 ...

  2. js ajax上传图片到服务器

    $("#up_goods_pic").on('change',function(){ var file = this.files[0]; var url = webkitURL.c ...

  3. ajax上传图片到服务器简单操作

    前端: 通过Ajax方式上传文件,使用FormData进行Ajax请求.上传文件或图片时,要求的格式为enctype ="multipart/form-data"(以二进制格式上传 ...

  4. 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

  5. ajax上传图片

    选择文件后 ajax上传图片到后台,后台执行保存操作,返回上传的图片路径,显示到页面 需要引入ajaxfileupload.js js代码 <script type="text/jav ...

  6. vuejs使用FormData对象,ajax上传图片文件

    我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. ...

  7. 使用ajax上传图片,并且使用canvas实现出上传进度效果

    前端代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> &l ...

  8. 通过android 客户端上传图片到服务器

    昨天,(在我的上一篇博客中)写了通过浏览器上传图片到服务器(php),今天将这个功能付诸实践.(还完善了服务端的代码) 不试不知道,原来通过android 向服务端发送图片还真是挺麻烦的一件事. 上传 ...

  9. 通过ajax访问Tomcat服务器web service接口时出现No 'Access-Control-Allow-Origin' header问题的解决办法

    问题描述 通过ajax访问Web服务器(Tomcat7.0.42)中的json web service接口的时候,报以下跨域问题: XMLHttpRequest cannot load http:// ...

随机推荐

  1. Message Queue vs. Web Services?

    From stackoverflow.com When you use a web service you have a client and a server: If the server fail ...

  2. mongodb中的副本集搭建实践

    准备运行1个主节点,2个从节点,从节点中其中是一个是仲裁节点(Arb). --oplogSize --oplogSize --oplogSize 其中application是副本集的名称,节点必须相同 ...

  3. Javascript学习笔记:对象的属性类型

    在ECMAScript中有两种属性:数据属性和访问器属性 1.数据属性 configurable:表示能否通过delete删除属性从而重新定义属性:或者能否修改属性的特性:或者能否把属性修改为访问器属 ...

  4. My favorite bit torrent client for Ubuntu

    Deluge Bit Torrent ClientDeluge is among my favorite bit torrent clients for Ubuntu. It is fast, sli ...

  5. 自定义弹出框基于zepto 记得引入zepto

    html <!DOCTYPE html> <html> <meta charset="utf-8"> <title></tit ...

  6. Trick

    1. var b = a.slice(beginIndex,endIndex); [].slice.call( [] ) Array.prototype.slice.call([]) will cop ...

  7. hdu 5542 The Battle of Chibi(2015CCPC - C题)

    题目链接:hdu 5542 首届CCPC的C题,比赛时一起搞了好久,最后是队友A出的,当时有试过用树状数组来优化 dp,然后今天下午也用树状数组搞了一下午,结果还是踩了和当时一样的坑:我总是把用来记录 ...

  8. CSS 3 选择器

    css3叫做样式表  对页面的布局,字体,颜色,背景和其他效果做更精确的布置 支持的浏览器有 chrome safari firfox opera 甚至360都开始支持360用的是别的内核 IE10 ...

  9. SQL语句中SUM与COUNT的区别

    SUM是对符合条件的记录的数值列求和 COUNT 是对查询中符合条件的结果(或记录)的个数 例如: 表fruit id     name    price 1     apple     3.00 2 ...

  10. 【转】XGBoost参数调优完全指南(附Python代码)

    xgboost入门非常经典的材料,虽然读起来比较吃力,但是会有很大的帮助: 英文原文链接:https://www.analyticsvidhya.com/blog/2016/03/complete-g ...