这篇文章就简单的介绍一个很好用的文件上传工具，批量带预览功能。直接贴代码吧，都有注释，很好理解。

HTML页面

<!DOCTYPE html>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>

<head>

<c:set var="BASE" value="${pageContext.request.contextPath}"/>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

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

<title>新增照片</title>

<script type="text/javascript">

var BASE = "${BASE}";

</script>

<!-- 引用控制层插件样式 -->

<link rel="stylesheet" href="${BASE}/www/css/upload/zyupload-1.0.0.min.css " type="text/css">

<script type="text/javascript" src="${BASE}/www/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="${BASE}/www/js/upload/zyupload-1.0.0.min.js"></script>

</head>

<body>

<input type="hidden" id="boxId" value="${boxId}"/>

	    <div id="zyupload" class="zyupload"></div>  

	    <script type="text/javascript">

			$(function(){

				var boxId = $("#boxId").val();

				// 初始化插件

				$("#zyupload").zyUpload({

					width            :   "650px",                 // 宽度

					height           :   "400px",                 // 宽度

					itemWidth        :   "140px",                 // 文件项的宽度

					itemHeight       :   "115px",                 // 文件项的高度

					url              :   BASE+"/photo/add/"+boxId,  // 上传文件的路径

					fileType         :   ["jpg","png","txt","js","exe","gif"],// 上传文件的类型

					fileSize         :   51200000,                // 上传文件的大小

					multiple         :   true,                    // 是否可以多个文件上传

					dragDrop         :   true,                    // 是否可以拖动上传文件

					tailor           :   true,                    // 是否可以裁剪图片

					del              :   true,                    // 是否可以删除文件

					finishDel        :   false,  				  // 是否在上传文件完成后删除预览

					/* 外部获得的回调接口 */

					onSelect: function(selectFiles, allFiles){    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件

						console.info("当前选择了以下文件：");

						console.info(selectFiles);

					},

					onDelete: function(file, files){              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件

						console.info("当前删除了此文件：");

						console.info(file.name);

					},

					onSuccess: function(file, response){          // 文件上传成功的回调方法

						console.info("此文件上传成功：");

						console.info(file.name);

						console.info("此文件上传到服务器地址：");

						console.info(response);

						$("#uploadInf").append("<p>上传成功，文件地址是：" + response + "</p>");

					},

					onFailure: function(file, response){          // 文件上传失败的回调方法

						console.info("此文件上传失败：");

						console.info(file.name);

					},

					onComplete: function(response){           	  // 上传完成的回调方法

						console.info("文件上传完成");

						console.info(response);

					}

				});

			});

		</script>

	</body>

      </body>

</html>

　JS和CSS、IMAGES文件下载地址https://page69.ctfile.com/fs/3775069-203728262，自己根据html中的导入，找不到的在eclipse全局搜索

  action代码：根据需求改地址

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

    public void addPhotospost(@PathVariable(value="boxId") String boxId, HttpServletRequest request,HttpServletResponse response ) throws IOException {

        ServletContext servletContext=request.getSession().getServletContext();

        String newFileName="";

            PrintWriter out = response.getWriter();  

            //文件保存目录路径

            String savePath = "E:/";

            //String savePath = this.getServletContext().getRealPath("/") + configPath;  

            // 临时文件目录

            String tempPath = servletContext.getRealPath("/") + Constant.dirTemp;  

            SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");

            String ymd = sdf.format(new Date());

            savePath += "/" + ymd + "/";

            //创建文件夹

            File dirFile = new File(savePath);

            if (!dirFile.exists()) {

                dirFile.mkdirs();

            }  

            tempPath += "/" + ymd + "/";

            //创建临时文件夹

            File dirTempFile = new File(tempPath);

            if (!dirTempFile.exists()) {

                dirTempFile.mkdirs();

            }  

            DiskFileItemFactory  factory = new DiskFileItemFactory();

            factory.setSizeThreshold(20 * 1024 * 1024); //设定使用内存超过5M时，将产生临时文件并存储于临时目录中。

            factory.setRepository(new File(tempPath)); //设定存储临时文件的目录。

            ServletFileUpload upload = new ServletFileUpload(factory);

            upload.setHeaderEncoding("UTF-8");

            try {

                List items = upload.parseRequest(request);

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

                Iterator itr = items.iterator();  

                while (itr.hasNext())

                {

                    FileItem item = (FileItem) itr.next();

                    String fileName = item.getName();

                    long fileSize = item.getSize();

                    if (!item.isFormField()) {

                        String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();

                        SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");

                         newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;

                        try{

                            File uploadedFile = new File(savePath, newFileName);  

                            OutputStream os = new FileOutputStream(uploadedFile);

                            InputStream is = item.getInputStream();

                            byte buf[] = new byte[1024];//可以修改 1024 以提高读取速度

                            int length = 0;

                            while( (length = is.read(buf)) > 0 ){

                                os.write(buf, 0, length);

                            }

                            //关闭流

                            os.flush();

                            os.close();

                            is.close();

                            System.out.println("上传成功！路径："+savePath+"/"+newFileName);

                            out.print(savePath+"/"+newFileName);

                        }catch(Exception e){

                            e.printStackTrace();

                        }

                    }else {

                        String filedName = item.getFieldName();

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

                        System.out.println(new String(item.getString().getBytes("iso-8859-1"),

                                "utf-8"));

                        System.out.println("FieldName："+filedName);

                        // 获得裁剪部分的坐标和宽高

                        System.out.println("String："+item.getString());

                    }

                }   

            } catch (FileUploadException e) {

                // TODO Auto-generated catch block

                e.printStackTrace();

            }

            out.flush();

            out.close();

    }

效果图：

JAVA图片批量上传JS-带预览功能的更多相关文章

  1. 通过修改ajaxFileUpload.js实现多图片动态上传并实现预览

    参考:http://smotive.iteye.com/blog/1903606 大部分我也是根据他的方法修改的,我也要根据name实现动态的多文件上传功能,但是有个问题使我一直无法实现多文件上传. ...

  2. 分离与继承的思想实现图片上传后的预览功能：ImageUploadView

    本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...

  3. Asp.net中FileUpload控件实现图片上传并带预览显示

    单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理:     采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的 ...

  4. Java Spring Boot 上传文件和预览文件地址解析

    @RequestMapping(value ="/upload",method = RequestMethod.POST) @Permission(isAjax=false) pu ...

  5. asp.net无刷新上传（带预览）

    1.有个图片 <img id="Image1" title="用于广告栏及图文框缩略图" width="150" height=&qu ...

  6. jquery实现图片上传前本地预览功能

    HTML <img id="pic" src="" > <input id="upload" name="fil ...

  7. Nodejs实现图片的上传、压缩预览、定时删除

    前言 我们程序员日常都会用到图片压缩,面对这么常用的功能,肯定要尝试实现一番.第一步,node基本配置 这里我们用到的是koa框架,它可是继express框架之后又一个更富有表现力.更健壮的web框架 ...

  8. javascript实现文件上传之前的预览功能

    1.首先要给上传文件表单控件和图片控件设置name属性 <div class="form-group">                    <label fo ...

  9. jsp+springmvc实现文件上传、图片上传和及时预览图片

    1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...

随机推荐

  1. LoadRunner性能测试过程中报Error(-17998):Failed to get [param not passed in call] thread TLS entry.

    最近与其他公司一起合作使用loadrunner11进行性能测试,在此过程中,遇到Error(-17998)的错误,从网上搜索,找到的答案基本上都是说没有定义事务,但检查所有测试代码,发现都已经定义了事 ...

  2. 迭代子模式（Iterator）

    迭代子模式(Iterator) 顾名思义,迭代器模式就是顺序访问聚集中的对象,一般来说,集合中非常常见,如果对集合类比较熟悉的话,理解本模式会十分轻松.这句话包含两层意思:一是需要遍历的对象,即聚集对 ...

  3. ORACLE+PYTHON实战：复制A表数据到B表

    最近在学习python ,看到了pythod的oracle,不仅可以一次fetch多条,也可以一次insert多条,想写一个复制A表数据到B表的程序来看看实际效率能不能提高.写完发现,非常惊艳!效率提 ...

  4. Java集合（2）一 ArrayList 与 LinkList

    目录 Java集合(1)一 集合框架 Java集合(2)一 ArrayList 与 LinkList Java集合(3)一 红黑树.TreeMap与TreeSet(上) Java集合(4)一 红黑树. ...

  5. Nodejs的运行原理-科普篇

    前言 Nodejs目前处境稍显尴尬,很多语言都已经拥有异步非阻塞的能力.阿里的思路是比较合适的,但是必须要注意,绝对不能让node做太多的业务逻辑,他只适合接收生成好的数据,然后或渲染后,或直接发送到 ...

  6. 【机器学习】RNN学习

    感谢中国人民大学的胡鹤老师,课程容量巨大,收获颇丰. 之前提到的CNN模型主要用到人类的视觉中枢,但其有一劣势,无论是人类的视觉神经还是听觉神经,所接受到的都是一个连续的序列,使用CNN相当于割裂了前 ...

  7. Python_02笔记

    数据类型 引子 什么是数据?x=10, 10 是我们要存储的数据 为啥数据要分不同的类型数据是用来表示状态的,不同的状态就应该用不同的类型的数据去表示 数据类型数字(整形,长整型,浮点型,复数)字符串 ...

  8. Java爬虫--Https绕过证书

    https网站服务器都是有证书的. 是由网站自己的服务器签发的,并不被浏览器或操作系统广泛接受. 在使用CloseableHttpClient时经常遇到证书错误(知乎的网站就是这样) 现在需要SSL绕 ...

  9. Xamarin.iOS + MvvmCross: UIPickerView data binding, SelectedItemChanged event

    UI initialization: _pickerView = new UIPickerView(); _pickerView.ShowSelectionIndicator = true; _pic ...

  10. lufylegend练习（1）帧速率

    近期发现一个HTML开源游戏引擎,感觉还不错http://lufylegend.com/ 可是没有基础的同学.看起来费劲.所以打算边学边记笔记,说明都在凝视中 <!DOCTYPE html> ...