<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. Java基础笔记（十八）——多态

    多态表示同一个操作作用在不同对象时,会有不同的结果. 多态可分为编译时多态和运行时多态. 编译时多态:方法重载,编译时就可以确定到底调用哪个方法,可以被看做一个类中的方法多态性. 运行时多态:只有在运 ...

  2. Python-6-字典-函数dict，字典的基本操作及将字符串设置功能用于字典

    phonebook = {'Alice': '2341', 'Beth': '9102', 'Cecil': '3258'} 字典由键及其相应的值组成,这种键-值对称为项. 键必须为独一无二,值不必如 ...

  3. stdin stdout stderr 标准I/O流

    Unix中一切皆文件,磁盘等设备在操作系统来看都是文件. 对文件进行操作时,需要打开这个文件,并获得文件描述符(file descriptor, fd) 而每个进程生来就有三个文件描述符绑定在它身上, ...

  4. 关于pycharm使用sqlite数据可视化的使用

    如图

  5. 对称加密中的ECB模式&CBC模式

    ECB模式: CBC模式: 所有的迭代模式:

  6. Vue.js-----轻量高效的MVVM框架（一、初识Vue.js）

    1.什么是Vue.js? 众所周知,最近几年前端发展非常的迅猛,除各种框架如:backbone.angular.reactjs外,还有模块化开发思想的实现库:sea.js .require.js .w ...

  7. Unity3d C# 创建 物体

    using UnityEngine; using System.Collections; public class create : MonoBehaviour { // Use this for i ...

  8. 使用codesmith无法连接mysql问题

    最近研究codesmith的用法,遇到了如题的问题,记录一下解决的方法. 1.问题描述: 在codesmith中选择MySQLSchemaProvider并连接数据库时,会报以下错误: Test fa ...

  9. free -m命令输出详解

    free -m输出有3行: Mem:表示物理内存 -/+ buffers/cached:表示物理内存缓存 Swap:表示硬盘交换分区 其中Mem中的total.used.free.shared.buf ...

  10. powerdesigner 遇到的各种问题总结

    1. 设置自增 打开表 -- 在具体列的前面双击即可添加各种属性 2. 生成sql 时设置编码 database --> generate database --> format --&g ...