SpringMvc+Angularjs 实现多文件批量上传

SpringMvc代码

jar包

commons-fileupload

commons-io

spring-mvc.xml配置

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  <property name="defaultEncoding" value="UTF-8" />
</bean>

Controller

@RequestMapping(value = "api/v1/upload", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public Map upload (@RequestParam(value = "files") MultipartFile [] files,
                 @RequestParam(value = "id") String id,
                 HttpServletRequest request, HttpServletResponse response) {
  Map res = new HashMap();
  try {
    log.info("upload>>>>>id:{}", id);
    if (files!=null) {
      for (MultipartFile file:files) {
        log.info("filename:{}", file.getOriginalFilename());
      }
    }
  } catch (Exception e) {
    log.error("upload>>>>异常:{}", e.toString());
  }
  log.info("upload>>>>返回结果:{}", res);
  return res;
}

保存到本地

// copy File
 public boolean copyFile (MultipartFile tempFile, String filePath) {
   Boolean res = false;
   try {
     File file = new File(filePath);
     if (!file.getParentFile().exists()) {
       file.getParentFile().mkdirs();
     }
     // 将文件拷贝到当前目录下
     tempFile.transferTo(file);
     res = true;
   } catch (Exception e) {
     log.info("copyFile>>>>异常:{}", e.toString());
   }
   return res;
 }

AngularJs代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="uploadCtrl">
  <p><input type="file" multiple="multiple" name="files"></p>
  <p><input type="text" name="id" ng-model="id"></p>
  <p><input type="button" value="提交" ng-click="submit()"></p>
</div>
<script>
  var app = angular.module('myApp', []);
  app.controller('uploadCtrl', ["$scope", "$http", function($scope, $http) {
    $scope.submit = function () {
      var fd = new FormData();
      var files = document.querySelector('input[name="files"]').files;
      for (var i=0; i<files.length; i++) {
        fd.append("files", files[i]);
      }
      fd.append("id", $scope.id);
      $http({
        method:'POST',
        url  : '/Project/api/v1/upload',
        data: fd,
        headers: {'Content-Type':undefined},
        transformRequest: angular.identity
      }).success(function (response) {
        console.log(response.data);
      }).error(function () {
      });
    }
  }]);
</script>
</body>
</html>

Form表单提交

<form action="/Project/api/v1/upload" method="POST" enctype="multipart/form-data">
  <p><input type="text" name="id" /></p>
  <p><input type="file" multiple="multiple" id="files" name="files" /></p>
  <p><input type="submit" value="Submit" /></p>
</form>

以上所述是小编给大家介绍的SpringMvc+Angularjs 实现多文件批量上,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 基于AngularJS的拖拽文件上传的实例代码

    随着HTML5的普及,现在大部分浏览器都支持拖拽功能,今天我们要说的就是实现一套拖拽上传的功能(Angularjs+nodejs). 一.首先前端这款插件是基于AngularJS的,下面我们来看主要代码. 引入js: <script src="js/angular.1.3.15.min.js"></script> <script src="js/ng-file-upload-shim.min.js"></script>

  • AngularJS 文件上传控件 ng-file-upload详解

    网上可以找到的 AngularJS 的文件上传控件有两个: angular-file-upload:https://github.com/nervgh/angular-file-upload ng-file-upload:https://github.com/danialfarid/ng-file-upload 这两个非常类似,连js文件的结构都是一样的.核心的js是.min.js,还都有一个-shim.min.js,用来支持上传进度条和上传暂停等高级功能. 按道理讲shim.js应该是可加可不

  • 学习使用AngularJS文件上传控件

    前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用...但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依靠官方文档和师兄的帮助,终于搞清楚了基本的使用方法.好东

  • AngularJS向后端ASP.NET API控制器上传文件

    本文实例介绍了前端AngularJS向后端ASP.NET Web API上传文件的实现方法,具体内容如下 首先服务端: public class FilesController : ApiController { //using System.Web.Http [HttpPost] public async Task<HttpResponseMessage> Upload() { if(!Request.Content.IsMimeMultipartContent()) { this.Requ

  • angularjs客户端实现压缩图片文件并上传实例

    主要是利用html5的canvas来进行图片的压缩,然后转化为dataURL,再有dataURL转化为Blob文件,Blob对象可以直接赋值给Formdata. app.service('Util', function($q) { var dataURItoBlob = function(dataURI) { // convert base64/URLEncoded data component to raw binary data held in a string var byteString

  • Angularjs上传文件组件flowjs功能

    现在的项目,无论代销,几乎不会缺省的一个功能就是上传下载功能,今天谈一谈使用AngularJS+bootsrtap下的上传下载功能. 1.angularjs和flowjs angularjs我在其他的博客里面也讲到了它的其他的一些用处,只是没有做过系统的说明,在这里也不打算一一介绍.这个在一些官网上都有说明,我也会花一点时间去整理一下angularjs的知识点以及在使用到angularjs需要注意的或者我在项目中碰到的一些问题,会在其他博客中跟大家分享.这里我只简单的一笔带过,主要是flowjs

  • SpringMvc+Angularjs 实现多文件批量上传

    SpringMvc代码 jar包 commons-fileupload commons-io spring-mvc.xml配置 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="UT

  • SpringMVC+Ajax实现文件批量上传和下载功能实例代码

    今天做了文件的上传下载,小小总结一下,基本的web项目建立及SpringMVC框架搭建此处不详细写出来了. 上传form: <form id="uploadfiles" enctype="multipart/form-data"> <input type="file" multiple="multiple" id="file_upload" name="file_upload&q

  • jquery插件uploadify实现带进度条的文件批量上传

    有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案,分享给大家供大家参考,具体如下 先上效果图: 具体代码如下: 在页面中如下 完整页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <

  • vue elementUI 处理文件批量上传方式

    目录 elementUI 如何处理文件批量上传 问题 解决 elementUI批量上传下载注意事项 在el-upload组件关键的钩子,其它省略 点击上传,将多个文件和表单数据一起上传 elementUI 如何处理文件批量上传 问题 elementUI的Upload上传组件,通过设置multiple为true,就可以实现多选文件:但是在处理的时候还是一个一个传上去.目前需要在所有文件上传后,将某几个上传错误的结果拼接起来做一次提醒 解决 this.$refs.upload.uploadFiles

  • 在SpringMVC框架下实现文件的上传和下载示例

    在eclipse中的javaEE环境下:导入必要的架包 web.xml的配置文件: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation=&

  • 详解SpringMVC使用MultipartFile实现文件的上传

    如果需要实现跨服务器上传文件,就是将我们本地的文件上传到资源服务器上,比较好的办法就是通过ftp上传.这里是结合SpringMVC+ftp的形式上传的.我们需要先懂得如何配置springMVC,然后在配置ftp,最后再结合MultipartFile上传文件. springMVC上传需要几个关键jar包,spring以及关联包可以自己配置,这里主要说明关键的jar包 1:spring-web-3.2.9.RELEASE.jar (spring的关键jar包,版本可以自己选择) 2:commons-

  • 2个Codeigniter文件批量上传控制器写法例子

    例子一: /** * 多文件上传 * * @author Dream <dream@shanjing-inc.com> */ public function multiple_uploads() { //载入所需类库 $this->load->library('upload'); //配置上传参数 $upload_config = array( 'upload_path' => '', 'allowed_types' => 'jpg|png|gif', 'max_siz

  • JS实现批量上传文件并显示进度功能

    今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是自己想要的.然后自己查阅各种资料,经过自己总结,最终完成了这个功能. 如果大家有什么问题可以提出来,一起交流,学习.有什么不对的地方也指出来,我也虚心学习.自己也是刚写博客,您们的赞是我写博客的动力,谢谢大家. 条件:我采用struts2,java ,ajax,FormData实现; 1.实现的逻辑

  • SpringMVC实现文件的上传和下载实例代码

    前些天一位江苏经贸的学弟跟我留言问了我这样一个问题:"用什么技术来实现一般网页上文件的上传和下载?是框架还是Java中的IO流".我回复他说:"使用SpringMVC框架可以做到这一点,因为SpringMVC为文件的上传提供了直接的支持,但需要依赖Apache提供Commons FileUpload组件jar包."鉴于这个问题,我上网也百度了一下,网上很多都是介绍的使用IO流来实现文件的上传和下载,也有说到框架的,但介绍的并不是很完整,今天小钱将和大家介绍使用Spr

  • webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码

    注意: 1,webuploader上传组件会和jQuery自带的上传组件冲突,所以不要使用<form>标签中添加上传文件的属性; enctype="multipart/form-data" 2.并且屏蔽ApplicationContext-mvc.xml里面的拦截配置! <!-- 上传拦截,如最大上传值及最小上传值 --> <!--新增加的webuploader上传组件,必须要屏蔽这里的拦截机制 <bean id="multipartRes

随机推荐