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对象实现的图片上传的更多相关文章

  1. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  2. 使用原生JS进行字符串转对象

    字符串转对象 目的 工作中如果需要原生 JS 完成字符转对象的话可以通过 JSON.parse(str), 但是这个方法是ES5中才出现, 如果需要兼容低版本就需要其它方法 使用原生 JS 解决字符串 ...

  3. FormData对象实现文件Ajax上传

    后台: import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; imp ...

  4. 使用JCrop进行图片裁剪,裁剪js说明,裁剪预览,裁剪上传,裁剪设计的图片处理的工具类和代码

     1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那 ...

  5. 原生JS实现队结构及利用队列模拟‘击鼓传花’游戏

    1. 前言 队列,是一种遵从先进先出(FIFO,First-In-First-Out)原则的有序集合.队列在尾部添加新元素,并从顶部移除元素,最新添加的元素必须排在队列的末尾. 2.功能说明 enqu ...

  6. 利用html5的FormData对象实现多图上传

    <html> <head> <title>FormData多图上传演示</title> </head> <body> <a ...

  7. 原生JS操作object HTMLTableSectionElement 对象,获取行数

    html页面 <tbody id="infoTab"> <tr class="fomat"> <td class="bl ...

  8. FormData 对象上传二进制文件

    使用jQuery 利用 FormData 上传文件:http://harttle.com/2016/07/04/jquery-file-upload.html     通过FormData对象可以组装 ...

  9. .NET中的FileUpload控件的使用-原生JS(二)

    本篇使用原生JS进行数据传输,使用FileUpload控件上传文件,适配IE. HTML <div class="container"> <div class=& ...

随机推荐

  1. 构造器参数过多时考虑使用构建器(Builder)

    一.静态工厂和构造器的局限性 面对需要大量可选参数才能构建对象时,静态工厂和构造器并不能随着可选参数的增加而合理扩展. 假设创建一个类Person需要使用大量的可选参数,其中两个参数是必填的,剩下的都 ...

  2. P3387 【模板】缩点 && P3388 【模板】割点(割顶)

    Tarjan算法 应用: 有向图的强连通分量 无向图割点和桥 双连通分量 接下来主要谈论前面两者的应用(主要是第三种还没学会) 算法简要介绍 我们需要先理解一下知识:搜索树 有向图的搜索树的4种边,如 ...

  3. AT1145 ホリドッグ

    洛谷的题解区里竟然没有O(1)做法详解-- 题面就是要判断\(1+2+\dots+n\)是不是素数 很容易让人想到上面的式子事实上等于\(n(n+1)/2\) 根据质数的定义,质数只能被1和自身整除 ...

  4. LaTeX 插图片

    本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50240371 这里列出3种LaTeX中 ...

  5. Bridge桥接模式(设计模式11)

    在没有使用桥接模式: 扩展新问题(类归属膨胀问题) 1增加性的电脑类型,要增加每个品牌下面的类 2如果要增加一个新的电脑品牌,要增加美中电脑类型的类 违背单一职责原则: · 一个类:联想笔记本,有两个 ...

  6. Nutch的配置(使用MySQL作为数据存储)

    首先先从http://www.apache.org/dyn/closer.cgi/nutch/下载安装包 这里假定nutch的根目录为:${APACHE_NUTCH_HOME} 配置${APACHE_ ...

  7. Spring中基于Java的配置@Configuration和@Bean用法 (转)

    spring中为了减少xml中配置,可以生命一个配置类(例如SpringConfig)来对bean进行配置. 一.首先,需要xml中进行少量的配置来启动Java配置: <?xml version ...

  8. C. Amr and Chemistry(Codeforces Round #312 (Div. 2) 二进制+暴力)

    C. Amr and Chemistry time limit per test 1 second memory limit per test 256 megabytes input standard ...

  9. django models.py增加后MySQL数据库中并没有生成相应的表

    根据教程到添加并保存quest的时候报错了 1.models.py里面的命名没有错 2.查看mysite->settiongs下的INSTALLED_APPS设置正确 3.使用python ma ...

  10. node11---相册

    app.js /* littleAlbum --.idea --controller(控制层相当于action层) --package.json --router.js --models(做事的是mo ...