檔案上傳——ssi-uploader外掛
阿新 • • 發佈：2018-11-09
一般檔案上傳的流程：
選擇檔案-》將檔案傳遞到後臺-》輸入流以位元組方式讀取檔案-》輸出流根據指定路徑寫入到伺服器指定位置-》檔案上傳結束
uploadFile_ssi-uploader.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path; %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta charset="UTF-8" /> <title>http://localhost:8081/osu-env/testhtml/uploadFile1.jsp</title> <link rel="stylesheet" href="../static/components/bootstrap/css/bootstrap.min.css" /> <link rel="stylesheet" href="../static/components/ssi-uploader/styles/ssi-uploader.css" /> <style type="text/css"> #spanNote { margin-left: 20px; } </style> </head> <body> <div class="row"> <div class="col-lg-12"> <form class="form-horizontal form-bordered" role="form" id="uploadImage"> <div class="panel-body"> <div class="row"> <div> <h3>檔案上傳——ssi-uploader外掛演示：</h3> <span id="spanNote">修改ssi-uploader.js中861行,自定義可上傳檔案型別有：文件txt,doc,docx,xls,ppt,pptx,pdf;圖片jpg,jpeg,png,bmp,gif;視訊mp4,flv</span> </div> <div class="col-md-12"> <h4>1. 拖拽區域+ 效果圖預覽：</h4> <input type="file" multiple id="ssi-upload" /> </div> <div class="col-md-12"> <h4>2. 拖拽區域+無預覽圖效果：</h4> <input type="file" multiple id="ssi-upload2"/> </div> <div class="col-md-12"> <h4>3.無拖拽區域+ 效果圖預覽：</h4> <input type="file" multiple id="ssi-upload3"/> </div> </div> </div> </form> </div> </div> <script src="../static/components/jquery-1.10.1.min.js"></script><!-- 此行jquery-1.10.1.min.js，必須在 其他**.js之上 --> <script src="../static/components/ssi-uploader/js/ssi-uploader.js"></script> <script src="../static/js/upload_ssi_uploader.js"></script> </body> </html>
uploadFile_ssi_uploader.js
$(function(){ /*------------------檔案上傳——ssi-uploader外掛初始化------------------*/ //1. 拖拽區域+ 效果圖預覽： $('#ssi-upload').ssi_uploader({ url:'../live/uploadFile_ssi_uploader.do', maxNumberOfFiles:8,//每次允許上傳多少個檔案 maxFileSize:2048,//允許上傳的最大檔案尺寸 locale:"zh_CN",//使用中文 //preview:false,//禁止圖片預覽效果 //dropZone:false,//禁止拖拽區域 allowed:['jpg', 'jpeg', 'png', 'bmp', 'gif','mp4','txt','flv','pdf','doc','docx','ppt','pptx','xls'], onUpload:function(data){ alert("上傳成功！"); }, }); //2. 拖拽區域+無預覽圖效果： $('#ssi-upload2').ssi_uploader({ url:'../live/uploadFile_ssi_uploader.do', maxNumberOfFiles:8,//每次允許上傳多少個檔案 maxFileSize:2048,//允許上傳的最大檔案尺寸 locale:"zh_CN",//使用中文 preview:false,//禁止圖片預覽效果 //dropZone:false,//禁止拖拽區域 allowed:['jpg', 'jpeg', 'png', 'bmp', 'gif','mp4','txt','flv','pdf','doc','docx','ppt','pptx','xls'], onUpload:function(data){ alert("上傳成功！"); }, }); //3.無拖拽區域+ 效果圖預覽： $('#ssi-upload3').ssi_uploader({ url:'../live/uploadFile_ssi_uploader.do', maxNumberOfFiles:8,//每次允許上傳多少個檔案 maxFileSize:2048,//允許上傳的最大檔案尺寸 locale:"zh_CN",//使用中文 //preview:false,//禁止圖片預覽效果 dropZone:false,//禁止拖拽區域 allowed:['jpg', 'jpeg', 'png', 'bmp', 'gif','mp4','txt','flv','pdf','doc','docx','ppt','pptx','xls'], onUpload:function(data){ alert("上傳成功！"); }, }); });
UploadFile_ssi_uploaderController.java
@Controller @RequestMapping(value = "live") public class UploadFile_ssi_uploaderController { /** * @Description: TODO(前臺使用ssi-uploader外掛，後臺處理檔案上傳) * @param: @param request * @param: @param params * @param: @return * @return: String * @throws */ @RequestMapping(value = "uploadFile_ssi_uploader.do") @ResponseBody public String uploadFile_ssi_uploader(HttpServletRequest request){ String back=FileUtil.uploadFile_ssi_uploader(request); return back; } }
FileUtil.java
/**
* @Description: TODO(處理檔案上傳)
* @param: @param request
* @param: @param params
* @param: @return
* @return: String
* @throws
*/
public static String uploadFile_ssi_uploader(HttpServletRequest request){
MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest)request;
Map<String, MultipartFile> files = Murequest.getFileMap();//得到檔案map物件
String upaloadUrl ="D:/upload/photo/";//得到當前工程路徑拼接上檔名
File dir = new File(upaloadUrl);
if(!dir.exists())//目錄不存在則建立
dir.mkdirs();
for(MultipartFile file :files.values()){
String fileName=file.getOriginalFilename();//原始檔名
File tagetFile = new File(upaloadUrl+fileName);//建立檔案物件
if(!tagetFile.exists()){//檔名不存在 則新建檔案，並將檔案複製到新建檔案中
try {
tagetFile.createNewFile();
} catch (IOException e) {
e.printStackTrace();
}
try {
file.transferTo(tagetFile);//到這裡就可以上傳了，以下是處理圖片及允許gif的上傳
//圖片副檔名
String types=fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();
//如果需要儲存原圖則不需要if中處理
if(!types.contains("gif")){
//Thumbnails.of(tagetFile).size(1024,768).toFile(tagetFile);//改變圖片大小為1024*768
}
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return "true";
} <!--參考
API+外掛http://www.jq22.com/jquery-info9613
http://www.youtiy.com/detail_302.html
https://blog.csdn.net/qq_21875331/article/details/82083201
http://www.cnblogs.com/Hmin2199/p/6018764.html
https://blog.csdn.net/StriverFeng/article/details/72046940?locationNum=10&fps=1
-->