1.       function uploadImageFile(){
  2. var xhr = new XMLHttpRequest();
  3. //定义表单变量
  4. var file = document.getElementById('imageFiles').files;
  5. //新建一个FormData对象
  6. var formData = new FormData();
  7. //追加文件数据
  8. for(i=0;i<file.length;i++){
  9. formData.append("file["+i+"]", file[i]);
  10. }
  11.  
  12. //post方式
  13. xhr.open('POST', memberPath + "/backstage/photo/uploadPhoto.json");
  14. //发送请求
  15. xhr.send(formData);
  16. //success回调
  17. xhr.onreadystatechange = function(){
  18. if ( xhr.readyState == 4 && xhr.status == 200 ) {
  19. console.log( xhr.responseText );
  20. var data = xhr.responseText;
  21. data = JSON.parse(xhr.responseText)
  22. if (data.code == 100) {
  23. //insertPhotoList(data.userPhotos); 这里传过来的是一个List<model>,做页面逻辑处理的
  24. } else if (data.code == 101) {
  25. aler('上传图片不符合要求');
  26. } else if (data.code == 102){
  27. var update_vip_url = 'update_vip_url';
  28. alert('您目前是普通会员,图片文件不可超过5M|升级会员可上传更大文件立即升级会员');
  29. } else if (data.code == 103) {
  30. alert('您目前是VIP会员,图片文件不可超过50M');
  31. }
  32.  
  33. }
  34. };
  35. //设置超时时间
  36. xhr.timeout = 100000;
  37. xhr.ontimeout = function(event){}
  38. }

这里是针对一个按钮可多选的上传,也就是input加上了 multiple="multiple" 属性。change事件触发的。后台用的springMVC框架。

  1. MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
  2. Iterator<String> names = multipartRequest.getFileNames();
  3.  
  4. while (names.hasNext()) {
  5. String name = (String) names.next();
  6. MultipartFile multipartFile = multipartRequest.getFile(name);
  7. }

这里用循环拿到文件,就可以进行上传操作了。

这里只是工作中遇到了,记录一下,考虑并不周全。js也是百度之后,找不到原页了,所以就不附转载地址了。见谅。

ajax多文件上传,js原生ajax请求(转)的更多相关文章

  1. python_way day21 Django文件上传Form方式提交,原生Ajax提交字符处啊,Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式,Django验证码,抽屉示例,

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  2. Day21 Django之Form文件上传、原生Ajax和实现抽屉实例

    一.Form文件上传 """ Django settings for prev_chouti project. Generated by 'django-admin st ...

  3. Django中的文件上传和原生Ajax

    概述 Django中的上传有3种方案: form 表单常规上传,但点击提交后会自动刷新页面 Ajax 上传,不刷新页面,(分为原生ajax上传和jQuery上传),IE7以上不兼容 iframe 上传 ...

  4. python django + js 使用ajax进行文件上传并获取上传进度案例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. ajax与文件上传

    一.ajax ajax(Asynchronous JavaScript And XML):异步JavaScript和XML,即使用JavaScript语句与服务器进行异步交互,传输的数据为XML(也可 ...

  6. python 全栈开发,Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  7. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

  8. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

  9. Ajax 与文件上传

    一 Ajax篇 1 ajax简介(Asynchronous Javascript And XML) 异步,Js,XML,即使用Javascript语言与服务器进行异步交互,传输的数据为xml(可扩展标 ...

随机推荐

  1. 经典矩阵dp寻找递增最大长度

    竖向寻找矩阵最大递增元素长度,因为要求至少一列为递增数列,那么每行求一下最大值就可以作为len[i]:到i行截止的最长的递增数列长度. C. Alyona and Spreadsheet time l ...

  2. 微信小程序一些常见的坑

    1.小程序都报wxss编译错误 解决方法: 在控制台输入openVendor() ,清除里面的wcsc wcsc.exe 然后重启工具 2.微信小程序wx:for警告 Now you can prov ...

  3. npm err报错解决

    最近看vue官网:按照官网步骤正确按照vue脚手架却报错 翻了很多,才发现是webpack的问题 npm install webpack-dev-server@2.9.7 --save ok,好了!

  4. 【转】jvm类加载

    类加载机制 JVM把class文件加载的内存,并对数据进行校验.转换解析和初始化,最终形成JVM可以直接使用的Java类型的过程就是加载机制. 类从被加载到虚拟机内存中开始,到卸载出内存为止,它的生命 ...

  5. Hive扩展功能(二)--HWI接口

    软件环境: linux系统: CentOS6.7 Hadoop版本: 2.6.5 zookeeper版本: 3.4.8 主机配置: 一共m1, m2, m3这五部机, 每部主机的用户名都为centos ...

  6. java设计模式之代理模式模式总结

    定义:代理模式这种设计模式是一种使用代理对象来执行目标对象的方法并在代理对象中增强目标对象方法的一种设计模式. 解读定义: 1.代理对象和目标对象有共同的接口: 2.使用代理对象执行目标对象中的方法: ...

  7. mysql 性能优化索引、缓存、分表、分布式实现方式。

    系统针对5000台终端测试结果 索引 目标:优化查询速度3秒以内 需要优化.尽量避免使用select * 来查询对象.使用到哪些属性值就查询出哪些使用即可 首页页面: 设备-组织查询 优化 避免使用s ...

  8. HDU_1874_畅通工程续_最短路问题

    畅通工程续 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  9. 并发编程学习笔记(11)----FutureTask的使用及实现

    1. Future的使用 Future模式解决的问题是.在实际的运用场景中,可能某一个任务执行起来非常耗时,如果我们线程一直等着该任务执行完成再去执行其他的代码,就会损耗很大的性能,而Future接口 ...

  10. ThinkPHP---框架介绍

    (1)什么是框架? ①框架是一堆包含了常量.方法和类等代码集合: ②半成品应用,只包含了项目开发时的底层架构,并不包含业务逻辑: ③包含一些设计模式,例如单例模式,工厂模式,AR(Active Rec ...