<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. Qt 学习之路 2（11）：布局管理器

    Home / Qt 学习之路 2 / Qt 学习之路 2(11):布局管理器 Qt 学习之路 2(11):布局管理器  豆子  2012年9月4日  Qt 学习之路 2  70条评论 所谓 GUI 界 ...

  2. Hanlp(汉语言处理包)配置、使用、官方文档

    配置使用教程:https://github.com/hankcs/HanLP Hanlp官方文档:http://www.hankcs.com/nlp/hanlp.html 参考API:http://h ...

  3. 根据map中某一字段排序

    以上是从小到大的排序...要注意.! 需要jdk8...

  4. [USACO18DEC]Sort It Out（树状数组）

    [Luogu5156] 题解 求字典序第 k 小的满足题意的集合,取反一下,就是求序列中字典序第 k 大的最长上升子序列 [51nod1376] 最长递增子序列的数量 置 \(f_{i}\)表示以权值 ...

  5. flex布局基础

    一.Flex布局是什么? Flex 即:"弹性布局" 任何一个容器都可以指定为Flex布局 .box{ display:flex; } 行内元素也可以使用Flex布局 .box{ ...

  6. Jenkins自动化CI CD流水线之1--介绍与安装

    第1章 大纲 CI/CD, DevOps介绍 Git安装与使用 Jenkins安装与使用 权限管理 参数化构建 Master-Slave 流水线(Pipeline) 邮件通知 应用案例 自动发布PHP ...

  7. 一些不常见的css知识

    margin-top:20%  ----------------20% 是宽度的20%

  8. vue-基于elementui自定义主题更换皮肤及自定义内容的皮肤跟换

    参考这篇博客https://blog.csdn.net/young_Emily/article/details/78591261做一遍,加上自己的一些理解 思路:通过自己上一篇博客https://ww ...

  9. 转 oracle cursor 游标

    转自:http://blog.csdn.net/liyong199012/article/details/8948952 游标的概念:     游标是SQL的一个内存工作区,由系统或用户以变量的形式定 ...

  10. mysql5.7导出到csv

    版本:mysql5.7 SELECT * FROM table_name where xxx into outfile 'C:/ProgramData/MySQL/MySQL Server 5.7/U ...