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. Android设计模式——Builder(建造者)模式

    1.建造者模式是一步一步创建一个复杂对象的创建模式.该模式是为了将构建复杂对象的过程和他的部件解耦,使得构建过程和部件表示隔离开. 2.Bulider模式的定义是:将一个复杂对象的构建与它的表示分离, ...

  2. Thingworx 使用REST API获取JSON数据

    版本:7.4.1 1.URL规则 http://localhost/Thingworx/Things/[Things名称]/Services/[Service名称]?method=POST&A ...

  3. 备份和恢复ZBrush文件

    ZBrush可以自动保存绘图的备份副本,并在发生系统错误时提醒您恢复备份副本.当ZBrush软件遇到崩溃.导致错误.非正常退出的时候,可能之前所做的努力就会功亏一篑,那么,在ZBrush软件中能否将文 ...

  4. django patch

    import datetime import pytz from django.apps import AppConfig from django.db.models.fields import Da ...

  5. C语言基础 (4) 原码反码补码与数据类型

    1.回顾 使用gcc编译代码 gcc hello.c -o hello windows下编译代码 C语言编译步骤: 预处理(头文件展开,干掉注释) gcc -E hello.c -o hello.i ...

  6. iOS开发——GPUImage源码解析

    一.基本概念 GPUImage:一个开源的.基于openGL的图片或视频的处理框架,其本身内置了多达120多种常见的滤镜效果,并且支持照相机和摄像机的实时滤镜,并且能够自定义图像滤镜.同时也很方便在原 ...

  7. webpack配置相关的页面异常

    原文:https://www.cnblogs.com/Hsong/p/9023341.html 前言 在团队协作开发中,为了统一代码风格,避免一些低级错误,应该设有团队成员统一遵守的编码规范.很多语言 ...

  8. 洛谷P1138 第k小整数

    我偏不用sort Treap好题啊 看到只有一个人写Treap,而且写的不清楚,那我就来详细地写一下,方便新人学习 第(-1)部分:前置知识 二叉查找树:满足左子树的数据都比根节点小,右子树的数据都比 ...

  9. UVALIVE 4256 Salesmen

    Salesmen Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVALive. Original ...

  10. Action访问ServletAPI的三种方式

    一.前言 Struts是一种基于MVC设计模式的web应用框架,主要担任C的角色,用于分离页面显示和业务逻辑处理,那其实在我们学习jsp的时候学过一个具有类似功能的东西——servlet.其实Stru ...