<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. 勤哲excel服务器开发外贸行业薪资考核系统

    以外销为驱动的订单行业,外贸业务员的素质直接决定公司效益.然而,大多数外贸公司或以外贸为主的工厂,经常面临外贸业务人员流动性频繁的问题,易 导致客户流失及跟单的困难.科学合理的与业绩挂钩的薪资考核,可 ...

  2. vue学习三:生命周期钩子

    生命周期钩子介绍: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生 ...

  3. 1. mybatis 的入门实例

    mybatis 的入门实例 1.创建一个普通的Java项目 1.加入jar包(所有mybatis 和mysql) 2.加入配置文件 src 目录下 (1) db.properties mysql.us ...

  4. Maven常见问题总结

    Failed to read artifact descriptor for cn.lds.tsp:common:jar 1. 先查看本地repository是否下载成功,如果没有,考虑更改下载rep ...

  5. JS之scrollTop、offsetHeight和offsetTop等属性用法详解和拖拽div

    标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题,导致掌握起来比较有难度,下面就介绍一下相关属性的用法.先来看一张比较经典 ...

  6. 多线程编程_控制并发线程数的Semaphore

    简介 Semaphore(信号量)是用来控制同时访问特定资源的线程数量,它通过协调各个线程,以保证合理的使用公共资源.很多年以来,我都觉得从字面上很难理解Semaphore所表达的含义,只能把它比作是 ...

  7. hadoop 常用hdfs命令

  8. CAD安装失败怎样卸载CAD 2014？错误提示某些产品无法安装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  9. [转]AngularJS+UI Router(1) 多步表单

    本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现   在线demo演示地址https://rawgit.com/dream ...

  10. #include <bits/stdc++.h>头文件

    这实际上就是一个头文件的集合,可以看看他的定义. #ifndef _GLIBCXX_NO_ASSERT #include <cassert> #endif #include <cct ...