通过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. C++11在时空性能方面的改进

    C++11在时空性能方面的改进 这篇我们聊聊C++11在时间和空间上的改进点: 主要包括以下方面: 新增的高效容器:array.forward_list以及unordered containers: ...

  2. Scrum Meeting 5-20151207

    任务安排 姓名 今日任务 明日任务 困难 董元财 将服务器转移到学校服务器 修复app特定情况下崩溃 无 胡亚坤 学习连接服务器框架 发布界面和购买界面 无 刘猛 在github上分配好任务 写博客 ...

  3. nodejs 访问mysql

    安装 $ npm install mysql 简介 这个一个mysql的nodejs版本的驱动,是用JavaScript来编写的.不需要编译 这儿有个例子来示范如何使用: var mysql = re ...

  4. Delphi名站以及高手Blog

    以前知道的: http://cnblogs.com/del (万一兄的,这个不用解释了) http://www.cnblogs.com/del/archive/2010/04/25/1720750.h ...

  5. Filestream复制视频文件

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  6. 转:画图解释 SQL join 语句

    画图解释 SQL join 语句 我认为 Ligaya Turmelle 的关于SQL联合(join)语句的帖子对于新手开发者来说是份很好的材料.SQL 联合语句好像是基于集合的,用韦恩图来解释咋一看 ...

  7. 由两点坐标如何画出直线 matlab

    由两点坐标如何画出直线  方法1:利用直线方程 斜率加截距 方法2:数据拟合 %由两点坐标得数据拟合直线与画线 x = [,]; y = [,]; k = ((-)/(-));% 由两点坐标得到直线斜 ...

  8. CSS3 transform对普通元素的N多渲染影响

    一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...

  9. java.util.logging.Logger 使用详解

    概述: 第1部分 创建Logger对象 第2部分 日志级别 第3部分 Handler 第4部分 Formatter 第5部分 自定义 第6部分 Logger的层次关系 参考 第1部分 创建Logger ...

  10. MCU厂家

    新唐(nuvoton):http://www.nuvoton.com/义隆(emc):http://www.emc.com.tw/chs/遠翔(feeling):http://www.feeling- ...