玩转图片上传————原生js XMLHttpRequest 结合FormData对象实现的图片上传
var form=document.getElementById("formId");
var formData=new FormData(form);
var oReq = new XMLHttpRequest();
oReq.onreadystatechange=function(){
if(oReq.readyState==4){
if(oReq.status==200){
var json=JSON.parse(oReq.responseText);
console.log(json);
}
}
}
oReq.open("POST", "http://localhost:3000/doup");
oReq.send(formData);
该方法是可以跨域的(端口不同的跨域),亲测可用!
服务端如何处理的解决方案看我的这篇文章http://www.cnblogs.com/theone67/p/6698762.html
玩转图片上传————原生js XMLHttpRequest 结合FormData对象实现的图片上传的更多相关文章
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- 使用原生JS进行字符串转对象
字符串转对象 目的 工作中如果需要原生 JS 完成字符转对象的话可以通过 JSON.parse(str), 但是这个方法是ES5中才出现, 如果需要兼容低版本就需要其它方法 使用原生 JS 解决字符串 ...
- FormData对象实现文件Ajax上传
后台: import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; imp ...
- 使用JCrop进行图片裁剪,裁剪js说明,裁剪预览,裁剪上传,裁剪设计的图片处理的工具类和代码
1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那 ...
- 原生JS实现队结构及利用队列模拟‘击鼓传花’游戏
1. 前言 队列,是一种遵从先进先出(FIFO,First-In-First-Out)原则的有序集合.队列在尾部添加新元素,并从顶部移除元素,最新添加的元素必须排在队列的末尾. 2.功能说明 enqu ...
- 利用html5的FormData对象实现多图上传
<html> <head> <title>FormData多图上传演示</title> </head> <body> <a ...
- 原生JS操作object HTMLTableSectionElement 对象,获取行数
html页面 <tbody id="infoTab"> <tr class="fomat"> <td class="bl ...
- FormData 对象上传二进制文件
使用jQuery 利用 FormData 上传文件:http://harttle.com/2016/07/04/jquery-file-upload.html 通过FormData对象可以组装 ...
- .NET中的FileUpload控件的使用-原生JS(二)
本篇使用原生JS进行数据传输,使用FileUpload控件上传文件,适配IE. HTML <div class="container"> <div class=& ...
随机推荐
- Linux内核分析笔记
我在MOOC<Linux内核分析>的学习笔记,这里只做个索引! 计算机是如何工作的
- HDU 2199 Can you solve this equation?【二分查找】
解题思路:给出一个方程 8*x^4 + 7*x^3 + 2*x^2 + 3*x + 6 == Y,求方程的解. 首先判断方程是否有解,因为该函数在实数范围内是连续的,所以只需使y的值满足f(0)< ...
- C++的头文件(转)
这几天在写比较困难的一部分,所以也没有时间总结一些东西了,不过昨天翻我的笔记本,发现了一篇还不错的笔记,给大家看看. C/C++头文件一览 C.传统 C++ #include <assert.h ...
- 优动漫PAINT中设置横排文字
初次启动优动漫PAINT使用文本工具时,软件默认是直排文字效果,如果您想更改为横排文字,或者切换横排竖排文本,如何设置,本文做简单介绍. 在工具箱中单击“文本工具”. 在绘图页面的任意位置单击鼠标,输 ...
- 第六章 Python之迭代器与生成器
迭代器 迭代:迭代是一个重复的过程,每次重复即一次迭代,并且每次迭代的结果是下一次重复的初始值 l=['a','b','c'] count=0 while count < len(l): pri ...
- Python3.7中的常用关键字
本文是在学习Python中遇到的一些关键字,作为日常总结的笔记. Python中有保留字/关键字 保留字就是在Python中预先保留的标识符,这些标识符在Python程序中具有特定用途,不能被程序员作 ...
- 实现js保留小数点后N位的代码
在JS中,一般实现保留小数点后N位的话,都是利用toFixed函数 <script language="javascript"> document.write(&quo ...
- [读书笔记] R语言实战 (五) 高级数据管理
1. 数值函数 1) 数学函数 2) 统计函数 3. 数据标准化 scale() 函数对矩阵或者数据框的指定列进行均值为0,标准化为1的标准化 mydata <- data.frame(c1=c ...
- code-reading-notes--libyang-1
API struct lyd_node * lyd_parse_xml(struct ly_ctx *ctx, struct lyxml_elem **root, int options, ...) ...
- ArcGIS探索
一.ArcGIS10概述 1.1 总览 ArcGIS是地理信息系统平台软件,主要用于创建和使用地图,编辑和管理地理数据,分析和共享地理信息,并在一系列应用中使用地图和地理信息. 功能定位: a.地图: ...