<html>

    <head>

        <title>FormData多图上传演示</title>

    </head>

    <body>
　　　　　<a href="javascript:newPicture();" >上传新图片</a>

        <input id="picture" type="file" style="display: none;" multiple="multiple">

    </body>

    <script type="text/javascript" src="/common/js/jquery.min.js"></script>

    <script type="text/javascript">

        function newPicture(){

            $('#picture').click();

        }

　　　　$('#picture').on('change',function(){

            var files= $(this).get(0).files;

            //如果有选择图片则上传图片

            var formData= new FormData();

            if(files.length>0){

                //formData.append("files",files[0]);

                for(var i=0;i<files.length;i++){
　　　　　　　　　　　　//FormData.set 和 append() 的区别在于，如果指定的键已经存在， FormData.set 会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面。
　　　　　　　　　　　　//注意：如果你的服务器端是PHP那么为了与php命名习惯一致在名称中需要添加[]，如formData.append('files[]',files[i]);

                    formData.append('files',files[i]);

                }

                var xhr= new XMLHttpRequest();

                xhr.open('POST', '/uploadImgAlbums');

                xhr.onreadystatechange = function(){

                    if (xhr.readyState== 4&& xhr.status== 200){

                        console.log('上传成功'+xhr.responseText);

                        //处理其他数据，这里根据需要进行调整

                    }

                };

                xhr.send(formData);

            }

        });

    </script>

</html>

看完了页面代码，在看下后端的控制器，我后端使用了spring mvc：

@RequestMapping("uploadImgAlbums")

public void albumUploadImgs(@RequestParam(value = "files", required = true) MultipartFile[] multipartFiles,HttpServletRequest req, HttpServletResponse response){

      for(MultipartFile multipartFile:multipartFiles){
　　　　　　　//打印上传的文件路径

           System.out.println(multipartFile.getOriginalFilename());
　　　　　　//打印文件字节数据

 　　　　　 System.out.println(multipartFile.getBytes());
　　　}
 }

我这里只是简单展示下数据发送到了后端文件上传控制器，剩下的根据项目业务的需求继续进行下去吧。

推荐阅读：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHTTPRequest

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

利用html5的FormData对象实现多图上传的更多相关文章

  1. php利用七牛云的对象存储完成图片上传-高效管理图片

    在搭建个人博客时,大家都会买一台云服务器.可是图片的存放一直是一个问题,冷月帮大家找到一个免费的第三方平台对象存储-七牛云.大家可以把图片上传到七牛云的对象存储,大大节约服务器的压力. 首先,大家在使 ...

  2. FormData对象实现文件Ajax上传

    后台: import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; imp ...

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

    var form=document.getElementById("formId"); var formData=new FormData(form); var oReq = ne ...

  4. springBoot+ vue+ Element-ui实现合并多图上传（一次请求多张图片）

    这次上传使用的是Elemet-ui的uoload上传组件,组件预留的钩子回调还是比较充足的. 1:  实现多图上传主要用到以下两个属性: 下面讲一下属性使用: <el-upload :actio ...

  5. HTML5 原生API input file 来实现多图上传，并大图预览

    闲来无事,突然想用原生来实现图片的多图上传. 一.效果图大致如下: 1.上传时可以选择多图 2.上传之后缩略图下过图如下: 3.点击缩略图,大图展示当前所点击的图片,并可以左右滑动查看其它的缩略图对应 ...

  6. 使用PHP和HTML5 FormData实现无刷新文件上传教程

    无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单 ...

  7. HTML5可预览多图片ajax上传(使用formData传递数据)

    HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

  8. 怎么样通过php使用html5实现多文件上传？（php多图上传）

    <!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8&q ...

  9. FormData+Ajax 实现多文件上传 学习使用FormData对象

    FormData对象是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利. 今天我们使用dropzone和FormData实现多文件上传功能. var SAMP = null; / ...

随机推荐

  1. POJ1054 The Troublesome Frog

    题目来源:http://poj.org/problem?id=1054 题目大意: 有一种青蛙在晚上经过一片稻田,在庄稼上跳跃,会把庄稼压弯.这让农民很苦恼.我们希望通过分析青蛙跳跃的路径,找出对稻田 ...

  2. 取消 windows2008 server 禁ping

    windows 2008 server 默认是禁ping的,取消方法如下: 依次打开: 服务器管理器——配置——高级安全windows防火墙——入站规则 找到“文件和打印机共享(回显请求-ICMPv4 ...

  3. [转]Groovy One Liners to Impress Your Friends

    Link:http://arturoherrero.com/2011/06/04/10-groovy-one-liners-to-impress-your-friends/ I find that c ...

  4. java修饰符的一些知识点

    1.java默认的修饰符是不加任何标志,默认为包修饰符,在同一个包下的类都可以对其进行调用.若需要进行跨包调用,往往需要加上修饰符public2.public修饰符对需要调用其的消费者都是可见的,一个 ...

  5. POJ 3734 Blocks（矩阵快速幂+矩阵递推式）

    题意:个n个方块涂色, 只能涂红黄蓝绿四种颜色,求最终红色和绿色都为偶数的方案数. 该题我们可以想到一个递推式 .   设a[i]表示到第i个方块为止红绿是偶数的方案数, b[i]为红绿恰有一个是偶数 ...

  6. Go语言基础之17--Redis基本操作

    一.介绍与连接 1.1 介绍 使用第三方的redis库, github.com/garyburd/redigo/redis github地址:https://github.com/gomodule/r ...

  7. 需要了解的几个Java基础点

    关键字 native:表示要调用非Java语言写函数,比如用C语言使用JNI实现的接口.比如windows环境的dll文件.举例:Object.hashcode() 位运算 << n:左移 ...

  8. WAF攻防实战

    摘要 本文主要分为四个部分,一.首先对WAF做了简单的介绍,让读者对WAF这类产品有一个大概的了解:二.这部分通过一个实例演示了如何利用WAF为其后端的Web应用提供安全防护功能:三.安全是相对的,世 ...

  9. sqoop数据校验

    sqoop数据校验 # check data oracle_cnt=$(sqoop eval \ -Dmapred.job.queue.name=${queue} \ --connect ${conn ...

  10. js input复选框选中父级同时子级也选中

    js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...