html5多图上传插件支持拖拽-zyUpload

阅读：2266 添加日期：2021/3/27 23:25:45 原文链接：https://www.toutiao.com/item/6424990922978624001/

本插件基于jquery,所以必须引入jquery包.

先看预览图:

1 引入js和css

html5多图上传插件支持拖拽-zyUpload

servlet后台需要的包:

html5多图上传插件支持拖拽-zyUpload

2 html中放置按钮 3 写js代码 $("#zyupload").zyUpload({ width: "650px", // 宽度 height: "400px", // 宽度 itemWidth: "140px", // 文件项的宽度 itemHeight: "115px", // 文件项的高度 url: "servlet/uploadAction", // 上传文件的路径 fileType: ["jpg", "png", "txt", "js"], // 上传文件的类型 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); } }); 4 后台servlet或者Struts2或者SpringMVC都可以.这里使用servlet代码,使用common第三方包public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { DiskFileItemFactory factory= new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); List<FileItem> list = null ; try { list = upload.parseRequest(request); } catch (FileUploadException e) { e.printStackTrace(); } String id = request.getParameter("id"); TGreens t = null; try { t = service.getTGreens(id); } catch (SQLException e) { e.printStackTrace(); } for(int i=0;i<list.size();i++){ FileItem item =list.get(i); if(item.isFormField()){ }else{ InputStream is = item.getInputStream(); String path = getServletContext().getRealPath("/upload"); //保存到tomcat安装目录 String fileName = item.getName(); //文件名 System.out.println("======================="+fileName); String hz = fileName.substring(fileName.lastIndexOf("."));//取后缀 String uuid = UUID.randomUUID().toString(); OutputStream os = new FileOutputStream(path+"//"+uuid+""+hz); int len =0; byte[] b = new byte[1024]; while((len=is.read(b))>-1){ os.write(b, 0, len); } os.close(); t.setGimg("upload/"+uuid+""+hz); try { service.update(t); //插入数据库 } catch (SQLException e) { e.printStackTrace(); } PrintWriter out = response.getWriter(); out.print(path+"/"+uuid+hz); out.close(); } } }


资源下载和demo演示地址:http://demo.sucaihuo.com/1085/程序员都懂的,右键查看源代码即可下载css和js了