通过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. Django migrations 重命名

    1:如果migrations文件中想要重命名文件,重命名后有一次修改models文件,再次执行python makegirations ******,再次执行migrate的时候发现报错了,在我往后的 ...

  2. 剑指offer一:二维数组中的查找

    题目: 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 思路: 这是一个顺序二维 ...

  3. jsp标签精华(持续更新中)

    <%@ taglib uri="/struts-tags" prefix="s" %> <%@ taglib uri="http:/ ...

  4. hdu2297Run(凸包的巧妙应用)

    链接 很巧妙的一道题,参考 把距离和速度分别作为x和y坐标,以斜率代表追赶速率,简直炫酷~ 具体看上面的博客,画的很清楚,就不再抄写一遍了. #include <iostream> #in ...

  5. ios 模拟器不显示系统版本了,后边都是 uuid 了,怎么弄回来?系统升级xcode6.4,模拟器找不到选择了?

    当我用El Capitan Beta 下 Xcode6.4版本时候出现了问题 常用的Scheme 选择版本不见了 而在Xcode 7.0 beta 6中显示有 简直就是坑,经过查资料其实是一个bug ...

  6. Postman 安装及使用入门教程

    安装 本文只是基于 Chrome 浏览器的扩展插件来进行的安装,并非单独应用程序. 首先,你要台电脑,其次,安装有 Chrome 浏览器,那你接着往下看吧. 1. 官网安装(别看) 打开官网,http ...

  7. myeclipse maven pom.xml 配置错误

    http://www.oschina.net/question/2265006_219341#tags_nav maven pom.xml 配置文件错误       腾讯云消息队列CMQ架构解析> ...

  8. SPSS数据分析—多重线性回归

    只有一个自变量和因变量的线性回归称为简单线性回归,但是实际上,这样单纯的关系在现实世界中几乎不存在,万事万物都是互相联系的,一个问题的产生必定多种因素共同作用的结果. 对于有多个自变量和一个因变量的线 ...

  9. python抓取数据 常见反爬虫 情况

    1.报文头信息: User-Agent Accept-Language  防盗链 上referer 随机生成不同的User-Agent构造报头 2.加抓取等待时间 每抓取一页都让它随机休息几秒,加入此 ...

  10. Validate Binary Search Tree [LeetCode]

    Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is defined as ...