实操——使用uploadify插件(php版和Java版) 与 Dropzone.js插件分别实现附件上传

实操——使用uploadify插件(php版和Java版)与 Dropzone.js插件分别实现附件上传

  • 1. 使用uploadify插件上传
    • 1.1 简介
      • 1.1.1 简介
      • 1.1.2 参考GitHub
    • 1.2 后端PHP版本的uploadify
      • 1.2.1 下载项目的目录结构
      • 1.2.2 测试看界面效果
      • 1.2.3 附页面代码 和 PHP代码
    • 1.3 后端Java版本的uploadify
      • 1.3.1 先看一下项目结构
      • 1.3.2 web.xml配置
      • 1.3.3 Java实现代码
      • 1.3.4 效果
    • 1.4 uploadify的优化一丢丢(不够完美)
      • 1.4.1 说明
      • 1.4.2 先看效果
      • 1.4.3 代码不同之处
  • 2. 使用Dropzone.js插件上传
    • 2.1 项目结构
    • 2.2 看效果
    • 2.3 核心代码
    • 2.4 参考
  • 3. 附项目下载
  • 4. 可能遇到问题
    • 4.1 idea中导入eclipse项目

1. 使用uploadify插件上传

1.1 简介

1.1.1 简介

  • uploadify是一个基于jQuery的文件上传插件,它提供了简单易用的界面和丰富的功能来实现文件上传操作。通过uploadify,用户可以选择文件并将其上传到服务器上。
  • uploadify具有以下特点:
    多文件上传、文件类型限制、文件大小限制、进度显示、事件回调(提供了多个事件回调函数,例如上传成功、上传失败等,方便开发者进行相应的处理)、自定义样式等。

1.1.2 参考GitHub

  • 原PHP项目如下(如果有PHP环境,原作者的项目下载下来即可运行,支持):
    https://github.com/Double-Lv/Huploadify.

1.2 后端PHP版本的uploadify

1.2.1 下载项目的目录结构

  • 下载地址就是上面参考的GitHub地址,项目目录如下:
    在这里插入图片描述

1.2.2 测试看界面效果

  • 下载之后放到PHP环境的某一站点下,直接运行即可,如下:
    在这里插入图片描述

1.2.3 附页面代码 和 PHP代码

  • demo.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link rel="stylesheet" type="text/css" href="Huploadify.css"/>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.Huploadify.js"></script>
    <style type="text/css">
    </style>
    <script type="text/javascript">
    $(function(){var up = $('#upload').Huploadify({// formData:{key:123456,key2:'vvvv'},auto:false,// fileTypeExts:'*.*',fileTypeExts:'*.jpg;*.jpge;*.gif;*.png;*.jpeg;*.txt;*.doc;*.docx;*.pdf;*.xls;*.xlsx;*.ppt;*.pptx;*.zip,',multi:true,fileSizeLimit:99999999999,showUploadedPercent:true,showUploadedSize:true,removeTimeout:9999999,uploader:'upload.php',onUploadStart:function(file){console.log(file.name+'开始上传');},onInit:function(obj){console.log('初始化');console.log(obj);},onUploadComplete:function(file){console.log(file.name+'上传完成');},onCancel:function(file){console.log(file.name+'删除成功');},onClearQueue:function(queueItemCount){console.log('有'+queueItemCount+'个文件被删除了');},onDestroy:function(){console.log('destroyed!');},onSelect:function(file){console.log(file.name+'加入上传队列');},onQueueComplete:function(queueData){console.log('队列中的文件全部上传完成',queueData);}});});
    </script>
    </head><body><div id="upload"></div></body>
    </html>
  • upload.php
    <?php$filename = iconv('UTF-8', 'GBK', $_FILES['file']['name']); $key = $_POST['key'];$key2 = $_POST['key2'];// echo $key;// echo $key2;// echo $filename;// echo "aaaa";if ($filename) {move_uploaded_file($_FILES["file"]["tmp_name"],"upload_images/" . $filename);}?>
    

1.3 后端Java版本的uploadify

1.3.1 先看一下项目结构

  • 这个项目里除了使用uploadify插件上传,还有包含了适用dropzone插件上传,先介绍uploadify,后面再说dropzone,结构如下(除了后端实现换成了Java,html页面几乎一样,js、css都是不变):
    在这里插入图片描述

1.3.2 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"xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"id="WebApp_ID" version="2.5"><display-name>dropzone_upload</display-name><servlet><servlet-name>uploadifyUpload</servlet-name><servlet-class>uploadify.UploadFileServlet</servlet-class></servlet><servlet-mapping><servlet-name>uploadifyUpload</servlet-name><url-pattern>/uploadifyUpload</url-pattern></servlet-mapping><servlet><servlet-name>showUploadifyFile</servlet-name><servlet-class>uploadify.ShowFileServlet</servlet-class></servlet><servlet-mapping><servlet-name>showUploadifyFile</servlet-name><url-pattern>/showUploadifyFile</url-pattern></servlet-mapping><welcome-file-list><welcome-file>index.jsp</welcome-file><welcome-file>index.html</welcome-file><welcome-file>index.htm</welcome-file><welcome-file>dropzone_index.html</welcome-file><welcome-file>uploadify_demo.html</welcome-file><welcome-file>uploadify_demo_2.html</welcome-file></welcome-file-list></web-app>
    

1.3.3 Java实现代码

  • UploadFileServlet.java 如下:
    package uploadify;import org.apache.commons.fileupload.FileItem;
    import org.apache.commons.fileupload.FileUploadException;
    import org.apache.commons.fileupload.disk.DiskFileItemFactory;
    import org.apache.commons.fileupload.servlet.ServletFileUpload;import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.*;
    import java.util.Iterator;
    import java.util.List;
    import java.util.UUID;/*** @Description 使用 uploadify 实现附件上传* @Author susu*/
    public class UploadFileServlet extends HttpServlet {private static final long serialVersionUID = 7434128027715196789L;// 上传文件保存路径private String uploadifyUploadPath = "/Users/susu/file_test/file_upload/uploadify_upload";public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String ret_fileName = null; //返回给前端已修改的图片名称request.setCharacterEncoding("UTF-8");response.setContentType("text/html; charset=UTF-8");PrintWriter out = response.getWriter();String tempPath = this.getServletContext().getRealPath("/");File dirFile = new File(uploadifyUploadPath);if (!dirFile.exists()) {dirFile.mkdirs();}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);Iterator<?> itr = items.iterator();while (itr.hasNext()) {FileItem item = (FileItem) itr.next();String fileName = item.getName();if (fileName != null) {String endstr = fileName.substring(fileName.indexOf("."), fileName.length());fileName = UUID.randomUUID() + endstr;ret_fileName = fileName;}if (!item.isFormField()) {try {File uploadedFile = new File(uploadifyUploadPath, fileName);OutputStream os = new FileOutputStream(uploadedFile);InputStream is = item.getInputStream();byte buf[] = new byte[1024];int length = 0;while ((length = is.read(buf)) > 0) {os.write(buf, 0, length);}os.flush();os.close();is.close();} catch (Exception e) {e.printStackTrace();}}}} catch (FileUploadException e) {e.printStackTrace();}//将已修改的图片名称返回前端out.print(ret_fileName);out.flush();out.close();}}
    
  • 参考如下:
    Uploadify v3.2.1 上传图片并预览.

1.3.4 效果

  • 如下:
    在这里插入图片描述
    在这里插入图片描述

1.4 uploadify的优化一丢丢(不够完美)

1.4.1 说明

  • 下面优化不够完美,只能说可以往这个方向优化,下面只是一个demo,如果上述已经满足你可以不用看下面的,因为如果实现完美可能还需要你自己去优化!!!

1.4.2 先看效果

  • 效果就是如果上传的是图片可以展示在页面,但是问题是不够动态,不支持多张,所以后续的优化方向是无论是图片还是附件上传之后都可以展示缩略图,好了只是方向,需要的自己去优化吧,先看单个图片效果:
    在这里插入图片描述
    在这里插入图片描述

1.4.3 代码不同之处

  • html页面,因为目前实现的效果不是特别好,所以直接截图了,如下:
    在这里插入图片描述
    在这里插入图片描述
  • ShowFileServlet.java 如下:
    package uploadify;import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.File;
    import java.io.FileInputStream;
    import java.io.IOException;
    import java.io.OutputStream;/*** @Description* @Author susu*/
    public class ShowFileServlet extends HttpServlet {private static final long serialVersionUID = 2761789171087122738L;private String uploadifyUploadPath = "/Users/susu/file_test/file_upload/uploadify_upload";public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String file = req.getParameter("file");File getFile = new File(uploadifyUploadPath + File.separator + file);FileInputStream fis = new FileInputStream(getFile);OutputStream os = resp.getOutputStream();try {byte[] bytes = new byte[1024 * 1024];while (fis.read(bytes) != -1)os.write(bytes);os.flush();} catch (IOException e) {e.printStackTrace();} finally {if (os != null)os.close();if (fis != null)fis.close();}}}

2. 使用Dropzone.js插件上传

2.1 项目结构

  • 如下:
    在这里插入图片描述

2.2 看效果

  • 如下:
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

2.3 核心代码

  • dropzone_index.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>dropzone上传插件测试</title><!-- jquery --><script type="text/javascript" src="${pageContext.request.contextPath }/static/dropzone/jquery-3.3.1.min.js"></script><!-- 注意:引入dropzone的js和css文件最好放在同一个目录,不然的话,会出现各种错误 --><script type="text/javascript" src="${pageContext.request.contextPath }/static/dropzone/dropzone.js"></script><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/dropzone/dropzone.css"><style type="text/css">#dropzoneUploadForm {min-height: 200px;width: 800px;}</style><script type="text/javascript">/* Dropzone上传插件配置 */var IsServerError = false;//服务器获取配置出错var fileList = new Array();var fileUploadingList = new Array();var fileUploadedPathsArray = new Array();//已上传的文件在服务器的路径集合;用于遇到异常时删除已上传的文件。(相当于回滚)var uploadFileArray = new Array();var xmlHttpRequestArray = new Array();Dropzone.options.dropzoneUploadForm = { //此处的"dropzoneUploadForm" 是dropzone的HTML元素ID的驼峰命名,比如<form id="my-form"></form>,那么此处应该写:Dropzone.options.myFormparamName: "myFile", //与后端实体里的 private FormFile myFile;对应,如果实体没有就不匹配,也可以放到下面的 "sending" 中params: { // 可传公共参数key1: "value11",key2: "value2"},maxFiles: 25, //最大上传数量maxFilesize: 20, // MB 单个文件大小上限filesizeBase: 1000,acceptedFiles: ".doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar,.7z,image/*,application/pdf",addRemoveLinks: true,clickable: true,autoProcessQueue: true, // true:自动上传,一次性上传parallelUploads个文件,上传成功后后面排队的其他队伍也会继续排队上传。false:关闭自动上传, 手动调度 ,但每次需要点击“上传”按钮才会触发上传,排队的其他文件不会自动上传。parallelUploads: 2, //最大并行处理量(一次同时上传的个数,不设置的话,默认:2个)/* 插件消息翻译 */dictInvalidFileType: '仅支持以下文件格式:.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar,.7z,image/*,application/pdf',dictFileTooBig: '上传失败:文件大小超出最大20M',dictMaxFilesExceeded: '上传失败:上传文件超出最大数量25',dictCancelUpload: '取消上传',dictRemoveFile: '移除文件',dictCancelUploadConfirmation: '确认取消上传',dictResponseError: "文件上传失败!",dictDefaultMessage: "<span class='bigger-150 bolder'><i class='icon-caret-right red'></i>拖动文件</span>上传\ <span class='smaller-80 gre'>(或者点击上传)</span> <br /> \ <i class='upload-icon icon-cloud-upload blue icon-3x'></i>",/* 上传缩略图预览模板 */previewTemplate: ' <div id="viewer"  class="dz-preview dz-file-preview">    <div class="dz-details" onClick="viewFile(this)" name="">  <div style="display:none;" class="fileId"></div>   <div class="dz-filename"><span data-dz-name></span></div>       <div class="dz-size" data-dz-size></div>    <img data-dz-thumbnail />    </div>    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>   <div class="dz-success-mark"><span>?</span></div>                           <div class="dz-error-mark"><span>?</span></div>                             <div class="dz-error-message"><span data-dz-errormessage>""</span></div>                          </div>                       ',/*accept: function(file, done) {fileList_Accepted.push(file)done();}, */init: function () {/*  var self = this;// 非自动上传。点击上传按钮开始ajax上传this.element.querySelector("button#uploadBtn").addEventListener("click", function(e) {e.preventDefault();e.stopPropagation();self.processQueue();}); *//*var accept = this.getAcceptedFiles();//所有接受的文件(合法)var reject = this.getRejectedFiles();//所有拒绝的文件(非法)var uploading = this.getQueuedFiles();//所有上传中的文件var queued = this.getRejectedFiles(); //所有排队中的文件*/var this_ = this;fileList = this.getAcceptedFiles();//所有接受的文件(合法)this.on("addedfile", function (file) {  //新添加的文件,每添加一个新文件都会触发一次该函数,可以使用alert测试一下//alert("addedfile:"+file.name)//fileList.push(file);})this.on("canceled", function (file, response) {  //当取消文件上传式调用//单个文件点击“取消上传”并确认后执行该函数,将该文件从上传列队中移除。for (var i in uploadFileArray) {if (uploadFileArray[i].name.trim() == file.name.trim()) {var xmlHttpRequest = xmlHttpRequestArray[i];xmlHttpRequest.abort();}}})this.on("sending", function (file, xmlHttpRequest, formData) {  //文件上传前调用console.log(xmlHttpRequest);uploadFileArray.push(file);xmlHttpRequestArray.push(xmlHttpRequest);// 每个文件需要传后台不同的参数的话,可在此处处理formData.append('fileName',escape(escape(file.name))); // fileName 如果实体里有对应的属性,直接映射上,不管有没有会都会放入request参数里})this.on("uploadprogress", function (file, progress, bytesSent) {//文件上传监听器(file:文件、progress:上传进度n%、bytesSent:)})this.on("complete", function (file, response) {//当上传完成,成功或者出现错误时调用.//alert("complete:"+response)})this.on("success", function (file, response) {  //文件已经成功上传,获得服务器返回信息作为第二个参数//每个文件上传成功后有以下处理//1.该文件会自动将UI拼接到上传区域,我们需要将文件的服务器路径隐藏到该UI中。为移除等操作提供便利。IsServerError = JSON.parse(JSON.parse(response).error)var File_PhysicalPath = "";var list = JSON.parse(JSON.parse(response).uploadFileResultClientList)for (var k in list) {var file0 = list[k];//alert(file0.fileName.trim()+":"+file.name+"\n"+file0.fileSize+":"+file.size)if (file0.fileName.trim() == file.name && file0.fileSize == file.size) {File_PhysicalPath = file0.physical_path;}}$(".dz-filename span").each(function () {if ($(this).text().trim() == file.name.trim()) {$(this).parent().parent().find(".fileId").text(File_PhysicalPath);fileUploadedPathsArray.push(File_PhysicalPath);}})});this.on("queuecomplete", function (file, response) { //当上传队列中的所有文件上传完成时调用.//alert("任务完成!")if (IsServerError) {alert("服务器获取文件夹配置失败!即将回滚上传操作");//若提示该警告,请查看com.nbc.demok.io.Upload.multi_upload()方法中的PropertiesUtils.getProperty("")获取配置是否为空。为空的话,请及时在配置文件中添加该配置//1.后台:遇到服务器异常,删除已上传的服务器上的文件var filePaths = "";for (var i in fileUploadedPathsArray) {var path = fileUploadedPathsArray[i];if (path != "") {filePaths = (filePaths == "") ? path : (filePaths + "¤¤¤¤¤" + path);}}if (filePaths.trim() != "") {removeFilesFromServer(filePaths);//服务器:移除所有未遇到错误之前的刚刚上传了的文件}//2.前端:移除所有显示的附件this.removeAllFiles(true);}});this.on("removedfile", function (file) { //删除单一文件//alert("removedfile:"+file.name+"\npath:"+$(file.previewElement).find(".fileId").text())//文件在服务器上的路径var filePath = $(file.previewElement).find(".fileId").text().trim();//删除文件操作有以下步骤://1.使用ajax删除在服务器上的该文件if (filePath != "") {removeFilesFromServer(filePath);}//2.删除文件在前端的显示this.removeFile(file);});this.on("error", function (file, errorMessage) { //不接受该文件(非定义的可接受类型)或上传失败//alert("error:"+file.name+"    "+errorMessage+"\nIsServerError:"+IsServerError)//this.removeFile(file);});}};function removeFilesFromServer(filePaths) {var path = $("#basePath").val();if (path == undefined) {alert("获取工程根目录出错");//请查看页面是否有id="basePath"的输入框,并且该输入框存放项目根目录return;}$.ajax({type: "POST",timeout: 60000,dataType: "json",url: path + "/dropzone_backend/dropzone_upload.jsp?method=remove",  //后台url请求,处理传递的参数async: false,data: {filePaths: escape(escape(filePaths))},beforeSend: function (xhr) {$("#loading_").css("display", "block");    // 数据加载成功之前,使用loading组件(使用加载中的图片,显示图片gif即可)},success: function (data) {//ajax请求成功执行该函数$("#loading_").css("display", "none");  	 //关闭加载中图片//alert("删除成功,数量:"+data.count+"个")},error: function (XMLHttpRequest, textStatus, errorThrown) {$("#loading_").css("display", "none") //if (textStatus == "timeout") {alert(" 请求超时,可能是网络较慢,请重新加载")} else {alert("XMLHttpRequest.status:" + XMLHttpRequest.status + "\n" + "XMLHttpRequest.readyState:" + XMLHttpRequest.readyState + "\n"+ "textStatus:" + textStatus);}}});}function viewFile(obj) {var filePath = $(obj).find(".fileId").text();if (filePath.trim().length > 0) {p = filePath.split(".");var suffix = "." + p[p.length - 1];   //后缀为 [.doc .docx .xls .xlsx .ppt .pptx]可以转pdf在线浏览//alert(suffix);var IsOffice = false;var arr = new Array(".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx")for (var i in arr) {if (suffix == arr[i].trim()) {IsOffice = true;}}if (IsOffice) {Open_Office_File(filePath)} else {Open_Not_Office_File(filePath);}}}function Open_Office_File(path) {alert("查看文件处理:" + path)}function Open_Office_File(path) {alert("查看文件处理:" + path)}</script></head>
    <body><input type="hidden" id="basePath" value="<%=request.getContextPath()%>"/>
    <br><h2>文件上传:</h2>
    <%-- 想优化的话,将 dropzone_backend/dropzone_upload.jsp 换成自己的后端action 接口即可    --%>
    <form id="dropzoneUploadForm" action="dropzone_backend/dropzone_upload.jsp" class="dropzone"><%--        <button id="uploadBtn" class="btn btn-success"> 确认上传 </button>--%>
    </form></body>
    </html>
    
  • dropzone_upload.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8" %>
    <%@page import="dropzone.util.DropzoneUploadUtil" %>
    <%String method = (request.getParameter("method") == null) ? "" : request.getParameter("method").trim();method = ("".equals(method)) ? "post" : method;if ("post".equals(method)) {// 上传附件DropzoneUploadUtil.dropzoneUploadFile(request, response);} else if ("remove".equals(method)) {// 删除附件DropzoneUploadUtil.dropzoneRemoveFile(request, response);}%>
    
  • DropzoneUploadUtil.java

    package dropzone.util;import com.google.gson.Gson;
    import dropzone.entity.UploadFileResultEntity;
    import org.apache.commons.fileupload.FileItem;
    import org.apache.commons.fileupload.FileItemFactory;
    import org.apache.commons.fileupload.disk.DiskFileItemFactory;
    import org.apache.commons.fileupload.servlet.ServletFileUpload;
    import org.json.JSONException;
    import org.json.JSONObject;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.File;
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.text.SimpleDateFormat;
    import java.util.ArrayList;
    import java.util.Iterator;
    import java.util.List;/*** 使用dropzone插件上传*/
    public class DropzoneUploadUtil {public static String uploadFilePath = "/Users/susu/file_test/file_upload/file_upload_0409";/*** 上传附件* @param request* @param response* @throws IOException* @throws JSONException*/public static void dropzoneUploadFile(HttpServletRequest request, HttpServletResponse response) throws IOException, JSONException {String physical_path = "";List<UploadFileResultEntity> uploadFileResultClientList = new ArrayList<>();List<UploadFileResultEntity> uploadFileResultServerList = new ArrayList<>();Gson gson = new Gson();JSONObject json = new JSONObject();FileItemFactory factory = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(factory);SimpleDateFormat fmt = new SimpleDateFormat("yyyy_MM_dd_HH_mm_ss_SSS");String date = fmt.format(System.currentTimeMillis());upload.setHeaderEncoding("UTF-8");try {List items = upload.parseRequest(request);Iterator iter = items.iterator();while (iter.hasNext()) {FileItem item = (FileItem) iter.next();if (!item.isFormField()) {String OriginalName = item.getName().substring(item.getName().lastIndexOf("\\") + 1);String fileName = OriginalName.substring(0, OriginalName.lastIndexOf(".")) + "@@" + date + "@@" + item.getName().substring(item.getName().lastIndexOf("."), item.getName().length());File f = new File(uploadFilePath);if (!f.exists()) {f.mkdirs();}
    //                        server_path = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/temp/" + fileName;physical_path = uploadFilePath + "/" + fileName;File uploadedFile = new File(physical_path);System.out.println("physical_path:" + physical_path);item.write(uploadedFile);uploadFileResultServerList.add(new UploadFileResultEntity(fileName, uploadedFile.length(), physical_path, ""));uploadFileResultClientList.add(new UploadFileResultEntity(OriginalName, uploadedFile.length(), physical_path, ""));}}} catch (Exception e) {e.printStackTrace();}response.setContentType("text/text;charset=utf-8");PrintWriter out = response.getWriter();json.put("error", false);json.put("uploadFileResultServerList", gson.toJson(uploadFileResultServerList));json.put("uploadFileResultClientList", gson.toJson(uploadFileResultClientList));out.print(json);out.flush();out.close();}/*** 删除附件(删除服务器上的附件)* @param request* @param response*/public static void dropzoneRemoveFile(HttpServletRequest request,HttpServletResponse response){JSONObject json = new JSONObject();String filePathsStr = (request.getParameter("filePaths") == null) ? "" : request.getParameter("filePaths").trim();String[] filePathsArray = null;try {if (!filePathsStr.equals("")) {if (filePathsStr.indexOf("¤¤¤¤¤") > 0) {filePathsArray = filePathsStr.split("¤¤¤¤¤");} else {filePathsArray = new String[1];filePathsArray[0] = filePathsStr;}int deleteCount = removeFile(filePathsArray);json.put("count", deleteCount);}PrintWriter p = response.getWriter();p.println(json);  //response ajax data,InputThinPCAccount2.js receive this "flag"。p.flush();p.close();} catch (JSONException e) {throw new RuntimeException(e);} catch (IOException e) {throw new RuntimeException(e);}}public static int removeFile(String[] paths) {int deleteCount = 0;for (String filePath : paths) {filePath = ScriptDecoderUtil.unescape(ScriptDecoderUtil.unescape(filePath));File file = new File(filePath);if (!file.exists()) {System.out.println("系统找不到指定的路径:" + filePath);} else if (!file.delete()) {System.out.println("删除附件失败:" + filePath);} else {deleteCount++;}}return deleteCount;}}
    

2.4 参考

  • 在下面项目上进行修改并测试,如下:
    dropzone上传插件demo.

3. 附项目下载

  • 上面测试效果的完整项目,拿来即用的话可以下载,下载如下:
    使用uploadify插件(php版和Java版) 与 Dropzone.js插件分别实现附件上传的demo .

4. 可能遇到问题

4.1 idea中导入eclipse项目

  • 如遇到此问题,可看下面的文章:
    idea中导入eclipse的javaweb项目——tomact服务(保姆级别).

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/5507.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python学习笔记----数据容器(六)

一、数据容器的入门 python中的数据容器&#xff1a;一种可以容纳多份数据的数据类型&#xff0c;容纳的每一份数据称之为1个元素。每一个元素&#xff0c;可以是任意类型的数据&#xff0c;如字符串、数字、布尔等。 数据容器根据特点的不同&#xff0c;如&#xff1a; 是否…

Content type ‘application/json;charset=UTF-8‘ not supported异常的解决过程

1.首先说明开发场景 *就是对该json格式数据传输到后台 后台实体类 import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import com.fasterxml.jackson.annotation.JsonIgnore; import lombok.Data; import org.sp…

【DeepL】菜鸟教程:如何申请DeepL免费API并使用Python的DeepL

前言 在这篇技术博文中,我们将介绍如何利用DeepL的强大功能,通过其免费API在Python项目中实现高质量的文本翻译。我们将从基础开始,解释DeepL是什么,它的用途,如何申请免费API,以及如何在Python中使用DeepL库。 什么是DeepL? DeepL是一个基于人工智能的翻译服务,它以…

【Linux】进程创建

思维导图 学习内容 在这一篇博客的主要内容是学习fork函数&#xff0c;了解fork函数的功能、返回值等。我们需要学会使用fork函数创建子进程。 学习目标 进程的概念fork函数的初始fork函数的返回值写时拷贝fork函数的常规用法fork函数调用失败的原因 零、进程的概念 进程&am…

如何利用仪表构造InfiniBand流量在数据中心测试中的应用

一、什么是Infiniband&#xff1f; 在当今数据爆炸的时代&#xff0c;数据中心作为信息处理的中心枢纽&#xff0c;面临着前所未有的挑战。传统的通信方式已经难以满足日益增长的数据传输需求&#xff0c;而InfiniBand技术的出现&#xff0c;为数据中心带来了全新的通信解决方…

2024洞悉AI人群新范式:AI机会人群社媒研究报告暨人群工厂系列白皮书

来源&#xff1a;蓝色光标 背景&#xff1a;AI生态初步成型&#xff0c;但仍需寻找清晰的商业化场景和机会 • 大模型厂商、核心零部件厂商&#xff08;NVIDIA、Intel&#xff09;、装配商&#xff08;​AIPC、AI手机&#xff09;、AI应用厂商共存&#xff0c;生态系统已经重构…

Windows如何通过wsl2迅速启动Docker desktop的PHP的Hyperf项目容器?

一、安装WSL 什么是WSL&#xff1f; 官网&#xff1a;什么是WSL&#xff1f; Windows Subsystem for Linux (WSL) 是一个在Windows 10和Windows 11上运行原生Linux二进制可执行文件的兼容性层。 换句话说&#xff0c;WSL让你可以在Windows系统上运行Linux环境&#xff0c;而无需…

【学习vue 3.x】(五)VueRouter路由与Vuex状态管理

文章目录 章节介绍本章学习目标 路由的基本搭建与嵌套路由模式vue路由的搭建嵌套路由模式 动态路由模式与编程式路由模式动态路由模式编程式路由 命名路由与命名视图与路由元信息命名路由命名视图路由元信息 路由传递参数的多种方式及应用场景路由传参 详解route对象与router对…

代码审计之SAST自动化

前言: 很久没写文章了&#xff0c;有点忙&#xff0c;落个笔&#xff0c;分享一些捣鼓或说适配好的一些好玩的东西。 脚本工具不开源&#xff0c;给一些思路&#xff0c;希望能给大家带来一些收获。 笔者能力有限&#xff0c;如有错误&#xff0c;欢迎斧正。 正文&#xff1a…

使用docker创建rocketMQ主从结构,使用

1、 创建目录 mkdir -p /docker/rocketmq/logs/nameserver-a mkdir -p /docker/rocketmq/logs/nameserver-b mkdir -p /docker/rocketmq/logs/broker-a mkdir -p /docker/rocketmq/logs/broker-b mkdir -p /docker/rocketmq/store/broker-a mkdir -p /docker/rocketmq/store/b…

Maven解决找不到依赖项

报错如图 方案一&#xff1a;Maven的Setting文件中添加albaba的镜像文件 1.下载maven &#xff1a;Maven – Download Apache Maven 2. 配置镜像 更改成这个&#xff1a; <mirror> <id>alimaven</id> <name>aliyun maven</name> <url&g…

Python量化炒股的财务因子选股

Python量化炒股的财务因子选股-财务因子选股 选股是股市投资的第一步&#xff0c;是最基础的一步&#xff0c;也是最重要的一步。 初识财务因子选股 量化选股是利用数量化的方法选择股票组合&#xff0c;期望该股票组合能够获得超越基准收益率的投资行为。总的来说&#xff…

PDF 正确指定页码后,挂载的书签页码对不上

这个问题与我的另一篇中方法一样 如何让一个大几千页的打开巨慢的 PDF 秒开-CSDN博客 https://blog.csdn.net/u013669912/article/details/138166922 另作一篇的原因 一篇文章附带一个与该文章主题不相关的问题时&#xff0c;不利于被遇到该问题的人快速搜索发现以解决其遇到…

数据结构学习/复习1--时间复杂度计算/异或的几个实际用途

一、什么是数据结构和算法 1注&#xff1a;在内存中的存储管理数据 2注&#xff1a;解决问题的方法 二、时间复杂度 1.算法的效率 2.时间复杂度的概念 计算时间复杂度案例1&#xff1a; 计算时间复杂度案例2&#xff1a; 计算时间复杂度案例3&#xff1a; 计算…

问题(十五)性能分析组件类加载问题

一、引言 最近作者在做性能分析服务的agent&#xff0c;有个功能是在代理启动的时候加载配置中心&#xff0c;拿到具体哪些目录下的类需要增强&#xff0c;这里碰到了类加载失败的问题。 二、类加载 1、问题 这里使用了pom的设置&#xff0c;在class文件被拉进去&#xff0c;…

HTML5(1)

目录 一.HTML5(超文本&#xff08;链接&#xff09;标记&#xff08;标签<>&#xff09;语言) 1.开发环境&#xff08;写代码&#xff0c;看效果&#xff09; 2.vscode 使用 3.谷歌浏览器使用 4.标签语法 5.HTML基本骨架&#xff08;网页模板&#xff09; 6.标签的…

Jetson Orin NX L4T35.5.0平台LT6911芯片 调试记录(2)vi discarding frame问题调试

基于上篇调试记录 Jetson Orin NX L4T35.5.0平台LT6911芯片 调试记录(1)MIPI问题调试-CSDN博客 1.前言 当通过gstreamer持续捕获视频设备时,帧数会下降,并且I输入越高,丢失的帧数越多。 当达到4k30hz时,它完全无法使用,系统会在几秒钟的收集后崩溃并重新启动 4k30hz …

【C++】:类和对象(下)

目录 一&#xff0c;再谈构造函数1.初始化列表2. 隐式类型转换的过程及其优化3. 隐式类型转换的使用4. explcit关键字5. 单参数和多参数构造函数的隐式类型转换 二&#xff0c;static成员1.静态成员变量2.静态成员函数 三&#xff0c;友元3.1 友元函数3.2 友元类 四&#xff0c…

Ansys Speos|进行智能手机镜头杂散光分析

本例的目的是研究智能手机Camera系统的杂散光。杂散光是指光向相机传感器不需要的散光光或镜面光&#xff0c;是在光学设计中无意产生的&#xff0c;会降低相机系统的光学性能。 在本例中&#xff0c;光学透镜系统使用Ansys Zemax OpticStudio (ZOS)进行设计&#xff0c;并使用…

LangChain入门2 RAG详解

RAG概述 一个典型的RAG应用程序,它有两个主要组件&#xff1a; 索引&#xff1a;从源中获取数据并对其进行索引的管道。这通常在脱机情况下发生。检索和生成&#xff1a;在运行时接受用户查询&#xff0c;并从索引中检索相关数据&#xff0c;然后将其传递给模型。 从原始数据…