<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. 牛客寒假算法基础集训营4 E applese 涂颜色

    链接:https://ac.nowcoder.com/acm/contest/330/E 精通程序设计的 Applese 叕写了一个游戏. 在这个游戏中,有一个 n 行 m 列的方阵.现在它要为这个方 ...

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

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

  3. Flashcache的 KEEP属性自动失效

    如果希望一个数据对象长期地缓存在flashcache中,则可以手动地将该数据对象的CELL_FLASH_CACHE属性设置为"keep". 其实需要说明的是,但不是数据对象的CEL ...

  4. python安装出现的证书问题

    1. pip install pyenv 安装时出现下图错误 Could not install packages due to an EnvironmentError: HTTPSConnectio ...

  5. 关于AppiumDriver

    java client2.0之后把AppiumDriver作为抽象类,IOSDriver和AndroidDriver继承AppiumDriver.安卓端就用AndroidDriver.2.0之前And ...

  6. poj2513连接木棍(字典树+欧拉回路+并查集)

    题目传送门 题目大意:给你一堆木棍,每根木管都有两种颜色,相同颜色的部分可以连接起来,问你这堆木棍可不可以连接成1根. 思路:大致的思路很好想,就是判断欧拉回路的方法(1.联通,2,要么顶点读书全为偶 ...

  7. netty在rpc MQ中的应用

    https://files.cnblogs.com/files/yszzu/netty-rpc-parent.zip https://github.com/apache/rocketmq/blob/m ...

  8. java——保存书店每日交易记录程序设计

    Books.java: 这个文件定义了一个Books类. 规定Books类拥有的属性:int id, String name, String publish, double price, int nu ...

  9. 爬虫(GET)——add_header()和get_header()

    import urllib.request import random url = "http://www.baidu.com/" # 可以是User-Agent列表,也可以是代理 ...

  10. linux 6 安装 使用 XtraBackup

    帮助文档:https://www.cnblogs.com/imweihao/p/7290026.html ---Yum安装 官网地址:https://www.percona.com/doc/perco ...