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. CentOS 安装 PHP 扩展

    下载地址:https://pecl.php.net/package/redis 上传目录:/usr/local/src //安装依赖 yum install php-devel -y //进入安装包目 ...

  2. 什么是CNN--Convolutional Neural Networks

    是近些年在机器视觉领域很火的模型,最先由 Yan Lecun 提出. 如果想学细节可以看 Andrej Karpathy 的 cs231n . How does it work? 给一张图片,每个圆负 ...

  3. quartz定时任务框架调度机制解析

    转自集群调度机制调研及源码分析 quartz2.2.1集群调度机制调研及源码分析引言quartz集群架构调度器实例化调度过程触发器的获取触发trigger:Job执行过程:总结:附: 引言 qurat ...

  4. elasticsearch集群安全重启节点

    es2.x 关闭集群的动态分片:(动态分片开启状态如果节点宕机了,会导致集群重新分配数据进行数据转移,会导致节点直接大量传输数据)curl -XPUT 'http://192.168.248.193: ...

  5. 怎样学CSS?

    什么是CSS? CSS(Cascading Style Sheet,层叠样式表)是由W3C(万维网联盟)的CSS工作组创建和维护的.它是一种不需要编译,可直接由浏览器执行的标记性语言,用于控制Web页 ...

  6. struts2配置 匹配原则 配置各项默认

    struts开发流程 1,引入jar包 2,配置web.xml 3,开发action类 4,配置struts.xml   版本: 2.3 引入jar文件 commons-fileupload-1.2. ...

  7. CentOS 7最小安装配置网络

    安装环境: VMware Workstation14 centos 7.5.1804 最小化安装 安装过程: 在系统安装成功后进行网络配置,我这里采用的是动态ip配置.首先得知道网络配置存放的目录: ...

  8. CSS骚操作

    获取当前HTML页面根元素的字体大小 getComputedStyle(document.getElementsByTagName("html")[0],undefined).fo ...

  9. windows 64位上oracle 11g安装

    每次下载安装都记不住,所以我总结一下,站在前人的肩膀上 原文地址:http://jingyan.baidu.com/article/48b558e33af4a57f39c09a42.html Orac ...

  10. android 读取xml

    在有些应用中,有一点小数据.直接存储在XML就是.实现较为简单, 1.xml文件放入asset目录.结构如: <?xml version="1.0" encoding=&qu ...