玩转图片上传————原生js XMLHttpRequest 结合FormData对象实现的图片上传

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

时间: 2024-10-10 08:09:53

玩转图片上传————原生js XMLHttpRequest 结合FormData对象实现的图片上传的相关文章

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

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>原生js实现tab选项卡里内嵌图片滚动特效代码</title><meta name="keywords" content="原生js实现tab选项卡里内嵌图片滚动特效代码" /><meta name=&

一款在论坛上看到的JS封装的随机过渡方式的图片切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

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

?? 1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那些js可以参考JCrop案例: 3.编写的html代码如下: <div id="light" class="white_content"> <div class="vatitlee"> 封面截取 <div class=&

图片拖拽原生js

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>拖拽原生js</title> <style>      #box1{      width: 100px;      height: 100px;      background-color: #ffff00;      position: abso

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

有两种实现方式: 1.可以使用form的方式实现. html代码如下: <body> <form enctype="multipart/form-data" id="inputForm1" modelAttribute="bankAdminist" action="" method="post" class="form-horizontal"> <div c

FormData对象实现文件Ajax上传

后台: import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation

ajax 利用formdata对象 实现多文件上传

<!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <title>多文件上传</title> <script src="jquery.js"></script> <script> $(function(){ $("#btn").click(func

FormData 对象上传二进制文件

使用jQuery 利用 FormData 上传文件:http://harttle.com/2016/07/04/jquery-file-upload.html 通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同,也就是二进制文件. 不是用<form>

js 禁止表单提交的方法(文件上传)

添加图片上传的表单,在form 添加属性onsubmit,提交之前会执行其中的方法,若返回FALSE,不会提交,返回TRUE,才会提交 <form method="post" enctype="multipart/form-data" action="/UpLoad.ashx" onsubmit="return check()"> <input type="file" name="