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. Python爬虫:爬取某网站关键词对应商品ID,且存入DB2数据库

    公司研发不给力,我就自己写了一个,专门爬关键词对应的商品ID. 其中还学会了用Python操作DB2数据库.Python发送邮件.写日志文件.处理浏览器访问限制. #!/usr/bin/python# ...

  2. codeforces 567 E. President and Roads 【 最短路 桥 】

    给出一个有向图,从起点走到终点(必须走最短路),问一条边是否一定会被经过,如果不经过它,可以减小它的多少边权使得经过它(边权不能减少到0) 正反向建图,分别求出起点到每个点的最短距离,终点到每个点的最 ...

  3. 关于函数调用约定-thiscall调用约定

    函数调用约定描述了如何以正确的方式调用某些特定类型的函数.包括了函数参数在栈上的分配顺序.有哪些参数将通过寄存器传入,以及在函数返回时函数栈的回收方式等. 函数调用约定的几种类型 stdcall,cd ...

  4. 《Exception》第八次团队作业:Alpha冲刺(第一天)

    一.项目基本介绍 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 Exception 作业学习目标 1.掌握软件测试基础技术.2.学习迭代式增量软 ...

  5. 对于 wepy 不是内部或外部命令 -- 的解决办法

    闲来没事继续研究自己之前一直未解决的问题,  就是自己笔记本安装wepy-cli,一直提示"wepy 不是内部或外部命令". 因为公司里面用的是这个框架, 想着自己在家没事的时候去 ...

  6. UDP Linux编程(客户端&服务器端)

    服务器端 服务器不用绑定地址,他只需要进行绑定相应的监听端口即可. #include <sys/types.h> #include <sys/socket.h> #includ ...

  7. struts2实现图片验证码

    生成图片验证码的主要工具类方法为: package com.yeting.fc.util; import java.awt.Color; import java.awt.Font; import ja ...

  8. STM32CubeMx的使用分享

    1. 新建立工程(以F103ZET6为例) 2. 配置引脚(以PA0为例)   3. 配置外设(以串口为例) 4. 配置时钟 5. 外设.GPIO.中断初始化 6. 生成工程 7. 添加自己的代码 8 ...

  9. Python:Fatal error in launcher: Unable to create process using 问题排查

    cmd> django-admin 回车Fatal error in launcher: Unable to create process using '"c:\users\admin ...

  10. django开发微信公众平台遇到的问题记录

    在pythonanywhere.com上使用django开发微信公众平台应用,结果用户发送的信息,微信服务器一次也没有成功转发到pythonanywhere上来,但是用接口测试工具调试却发现是正常的, ...