<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. maven profile启动项目

  2. apache 压缩 gzip

    配置 编辑httpd.conf文件 去掉 #LoadModule headers_module modules/mod_headers.so 前面的注释# 去掉 #LoadModule deflate ...

  3. Life is a journey

    Life is a journey. What we should care about is not where it's headed but what we see and how we fee ...

  4. hdu3068 求一个字符串中最长回文字符串的长度 Manacher算法

    最长回文 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  5. Django视图系统

    Django的view(视图)                                 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. ...

  6. linux的shell脚本

    一.遇到的问题: 1.在Documents/shell_Document的文件夹下创建第一个脚本. 但是发现在图形化界面不能执行shell脚本.只能到命令行模式下才能执行.感觉太麻烦,我的虚拟机从图形 ...

  7. java——虚拟机、线程

    java虚拟机: 是一台想象中的机器,有自己想象的硬件(处理器.堆栈.寄存器等)以及相应的指令系统. 生命周期:当执行java程序时,虚拟机开始运行,程序结束虚拟机停止.同一台计算机每多运行一个程序, ...

  8. Java日志组件1---Jdk自带Logger（java.util.logging.Logger）

    最近在看日志的一些东西,发现利用JDK自带的log也可以简单的实现日志的输出,将日志写入文件的过程记录如下: 1.新建LogUtil.Java( 里面写了几个静态方法,为log设置等级.添加log控制 ...

  9. 转 oracheck

    转 https://dbaplus.cn/news-10-220-1.html ORAchk 之前被称为RACcheck,后来它的检查范围进行了扩展,改名为了ORAchk,它是在数据库系统进行健康检查 ...

  10. android通过Jni加载so库遇到UnsatisfiedLinkError问题！！！

    错误信息: java.lang.UnsatisfiedLinkError: hsl.p2pipcam.nativecaller.NativeCaller at hsl.p2pipcam.manager ...