先看预览图:

1 引入js和css

servlet后台须要的包:

html5移动端上传图片插件html5多图上传插件 支撑拖拽zyUpload React

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了