必威体育Betway必威体育官网
当前位置：首页 > IT技术

使用Ajaxfileupload插件分别实现单文件和多文件上传

时间:2019-08-30 12:10:00来源:IT技术作者:seo实验室小编阅读:82次「手机版」
　

ajaxfileupload

一．ajaxfileupload上传文件

首先页面jsp代码：需要引入jquery和ajaxfileupload.js

<head>

<meta http-equiv="content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

<script type="text/JavaScript" src="js/ ajaxfileupload.js "></script>

</head>

<body>

   <input id="firstfile" type="file" name="firstfile">

   <button cellspacing="0" cellpadding="0">

@controller

@requestMAPPing("/Upload")

publicclass Upload {

   @RequestMapping(value = "/ToUploadFile", method = { RequestMethod.POST })

   public@responseBody integer ToUploadFile(@RequestParam("firstfile") MultipartFile firstfile,

  HttpServletRequest request, HttpServletResponse response) {

  try {

  request.setCharacterEncoding("utf-8");

  } catch (UnsupportedEncodingException e1) {

  e1.printstacktrace();

  }

  response.setcontenttype("text/html;charset=utf-8");

  response.addheader("Access-Control-Allow-Origin", "*");

  response.addHeader("Access-Control-Allow-Methods", "GET,POST");

  // ------------------------------------------------------------------------------------------------------------

  String originalFilename = null;

  try {

  if (firstfile.isempty()) {

return 0;

  } else {

originalFilename = firstfile.getOriginalFilename();

longsize = firstfile.getSize();

String contentType = firstfile.getContentType();

System.out.println("原始文件全路径名: " + originalFilename);

System.out.println("文件大小:" + size + "KB");

System.out.println("文件类型:" + contentType);

      System.out.println("========================================");

  }

  // ------------------------------------------------------------------------------------------------------------

  /*

   * 1. 获取项目的全路径

   */

  String root = request.getServletcontext().getrealpath("/WEB-INF/files");

  String filename = firstfile.getOriginalFilename();

  /*

   * 获取文件名，最后一个"\"后面的名字

   */

  intindex = filename.lastindexof("\\");

  if (index != -1) {

filename = filename.substring(index + 1);

  }

  /*

   * 生成唯一的文件名

   */

  String savename = IdAndTimeCreateUtil.getUUID() + "_" + filename;

  /*

   * 1. 根据文件名获取hashcode

   */

  inthCode = filename.hashCode();

  // 将hashcode转化为无符号整数基数为16的整数参数的字符串

  String hex = Integer.toHexString(hCode);

  /*

   * 2. 根据字符串生成文件目录

   */

  File dirFile = new File(root, hex.charAt(0) + "/" + hex.charAt(1));

  dirFile.mkdirs();

  /*

   * 4. 生成文件

   */

  File destFile = new File(dirFile, savename);

  String courseFile = destFile.getcanonicalPath();

  // 将文件保存到服务器相应的目录位置

  firstfile.transferTo(destFile);

  ///////////////////////////////////////////////////////

  } catch (Exception e) {

  e.printStackTrace();

  return 0;

  }

  return 1;

   }

}

运行过程如下：

上传文件：

控制台的打印：

服务器路径下存储的文件：

二．上述只能实现单文件的上传，下面顺便实现一下多文件同时上传：

Ajaxfileupload.js插件默认的都是单文件上传，所有要实现多文件上传需要改变源代码：（需要注意的是修改js等静态代码，再次运行的时候要清除服务器的缓存，不然还是用的之前的js导致无法多文件上传）

原来的代码：

createUploadForm: function(id, fileElementId)

   {

//create form

 var formId = 'jUploadForm' + id;

   var fileId = 'jUploadFile' + id;

   var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');

   var oldElement = $('#' + fileElementId);

   var newElement = $(oldElement).clone();

   $(oldElement).attr('id', fileId);

   $(oldElement).before(newElement);

   $(oldElement).appendTo(form);

   //set attributes

   $(form).css('position', 'absolute');

   $(form).css('top', '-1200px');

   $(form).css('left', '-1200px');

   $(form).appendTo('body');

   return form;

}

修改后：

createUploadForm: function(id, fileElementId)

   {

 

       var formId = 'jUploadForm' + id;

   var fileId = 'jUploadFile' + id;

   var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');

  

   if(typeof(fileElementId) == 'string'){

       fileElementId = [fileElementId];

       }

   for (var i in fileElementId)

   {

   var oldElement = $('#' + fileElementId[i]);

   var newElement = $(oldElement).clone();

   $(oldElement).attr('id', fileId);

   $(oldElement).before(newElement);

   $(oldElement).appendTo(form);

   }

   //set attributes

   $(form).css('position', 'absolute');

   $(form).css('top', '-1200px');

   $(form).css('left', '-1200px');

   $(form).appendTo('body');

   return form;

   },

下面是前端代码：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="js/ajaxfileupload.js"></script>

</head>

<body>

   <input id="firstfile" type="file" name="firstfile">

   <button cellspacing="0" cellpadding="0">

@RequestMapping(value = "/ToUploadFiles", method = { RequestMethod.POST })

   public@ResponseBody Integer ToUploadFile2(@RequestParam("files") MultipartFile[] files,

  HttpServletRequest request, HttpServletResponse response) {

  if(files!=null&&files.length>0)

  {

  for(inti=0;i<files.length;i++)

  {

MultipartFile file=files[i];

try {

     request.setCharacterEncoding("utf-8");

} catch (UnsupportedEncodingException e1) {

     e1.printStackTrace();

}

response.setContentType("text/html;charset=utf-8");

response.addHeader("Access-Control-Allow-Origin", "*");

response.addHeader("Access-Control-Allow-Methods", "GET,POST");

// ------------------------------------------------------------------------------------------------------------

String originalFilename = null;

try {

     if (file.isEmpty()) {

        return 0;

     } else {

        originalFilename = file.getOriginalFilename();

        longsize = file.getSize();

        String contentType = file.getContentType();

        System.out.println("原始文件全路径名: " + originalFilename);

        System.out.println("文件大小:" + size + "KB");

        System.out.println("文件类型:" + contentType);

         System.out.println("========================================");

     }

     // ------------------------------------------------------------------------------------------------------------

     /*

      * 1. 获取项目的全路径

      */

     String root = request.getServletContext().getRealPath("/WEB-INF/files");

     String filename = file.getOriginalFilename();

     /*

      * 获取文件名，最后一个"\"后面的名字

      */

     intindex = filename.lastIndexOf("\\");

     if (index != -1) {

        filename = filename.substring(index + 1);

     }

     /*

      * 生成唯一的文件名

      */

     String savename = IdAndTimeCreateUtil.getUUID() + "_" + filename;

     /*

      * 1. 根据文件名获取hashcode

      */

     inthCode = filename.hashCode();

     // 将hashcode转化为无符号整数基数为16的整数参数的字符串

     String hex = Integer.toHexString(hCode);

     /*

      * 2. 根据字符串生成文件目录

      */

     File dirFile = new File(root, hex.charAt(0) + "/" + hex.charAt(1));

     dirFile.mkdirs();

     /*

      * 4. 生成文件

      */

     File destFile = new File(dirFile, savename);

     String courseFile = destFile.getCanonicalPath();

     // 将文件保存到服务器相应的目录位置

     file.transferTo(destFile);

    ///////////////////////////////////////////////////////

} catch (Exception e) {

     e.printStackTrace();

     return 0;

}

  }

 

  }

 

  return 1;

   }

运行过程如下：

上传三个文件：

控制台的打印：

服务器路径下的文件：

相关阅读

RTF 文件格式解析

##RTF 格式解析例子内容代码如下{\rtf1\ansi\ansicpg936\deff0\deflang1033\deflangfe2052{\fonttbl{\f0\fnil\fcharse

视频文件格式--视频封装格式--视频编码格式区分

前言 什么是影片？其实就是一组（很多张）图片，时间间隔很小的连续展示出来，人们就觉得画面中的人物在动，这就是影片。那电影的实质就是N

FastDFS文件服务器——安装教程及命令，亲测使用

搭建单机模式的Fastdfs文件服务器链接（成功搭建）http://blog.csdn.net/u010098331/article/details/51646921参考的博客FastDFS分布

通过新浪“屏蔽门”来学习正确的robots.txt文件写法

前一段时间由于部分站长对robots文件的误读，导致了一则虚假消息的诞生--&ldquo;新浪封杀门&rdquo;，消息称新浪博客开始封杀百度蜘蛛

python zipfile extract 解压 中文文件名

python zipfile模块官网 正常使用: 解压缩: ZipFile.extract（member，path = None，pwd = None ） 参数 解释 members

赞()
分享到:

猜你喜欢

栏目导航

推荐阅读

热门阅读

seo实验室提供seo优化服务，有网站优化、网站建设、运营推广等需求请联系我们!
Copyright © 2001-2017 .seo实验室 版权所有 网站地图