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. Java标识符规范

    1.标识符用来定义包名,类名,方法名,变量名,常量名. 2.标识符必须由字母.下划线.$符号组成,不能以数字开头.不能是Java中的保留关键字.

  2. 5G商用时代来临!这些产业将发生变革

    5G商用时代来临!这些产业将发生变革 值得注意的是,在获得工信部发放的5G网络试验频率后,三大运营商已在各大城市建设5G基站,开展5G外场测试.华为亦适时表示,已经在中国40多个城市与中国三大运营商开 ...

  3. 关于<marquee>、<form>、input中的<text>、<password>、<hidden>、<wenbenkuang>、<reset>、<image>、<submit>、<radio>、<checkbox>以及<select><iframe src>的用法

    <html>    <head>        <meta charset="UTF-8">        <title></ ...

  4. 快速掌握ajax!

    ajax是什么? ajax——asynchronous JavaScript and xml:异步的js和xml 它能使用js访问服务器,而且是异步访问 服务器给客户端的响应一般是整个页面,一个htm ...

  5. W3c盒子模型+IE盒子模型+box-sizing属性

    1.盒子模型有两种,标准盒模型和IE盒模型,其中W3C标准的盒模型就是在网页的顶部加上 DOCTYPE 声明. (1)W3C标准的盒模型 W3C盒子模型包括4部分:margin,border,padd ...

  6. 11、E-commerce in Your Inbox:Product Recommendations at Scale-----产品推荐(prod2vec和user2vec)

    一.摘要 本文提出一种方法,将神经语言模型应用在用户购买时间序列上,将产品嵌入到低维向量空间中.结果,具有相似上下文(即,其周围购买)的产品被映射到嵌入空间中附近的向量. 二.模型: 低维项目向量表示 ...

  7. v-model指令后面跟的参数(number、lazy、debounce)

    1. number 想将用户的输入自动转换为Number类型(如果原值的转换结果为NaN, 则返回原值) 2. lazy 在默认情况下, v-model在input事件中同步输入框的值和数据, 我们可 ...

  8. 实现js保留小数点后N位的代码

    在JS中,一般实现保留小数点后N位的话,都是利用toFixed函数 <script language="javascript"> document.write(&quo ...

  9. Python 绘图与可视化 matplotlib(上)

    参考链接:https://www.cnblogs.com/dudududu/p/9149762.html 更详细的:https://www.cnblogs.com/zhizhan/p/5615947. ...

  10. Springboot 应用启动分析

    https://blog.csdn.net/hengyunabc/article/details/50120001#comments 一,spring boot quick start 在spring ...