一、html頁面
<link rel="stylesheet" href="fileinput/css/fileinput.min.css" />
<script type="text/javascript" src="fileinput/js/fileinput.min.js"></script>
<script type="text/javascript" src="fileinput/js/zh.js"></script>
<!-- 引入fileinput的初始化js代碼 -->
<script type="text/javascript" src="fileinput/myinput/my_fileinput.js"></script>
<body>
<!-- 添加附件 -->
<div class="modal-body">
<!-- <input type="file" name="reportFile" id="reportFile" multiple class="file" />
class="file" 會影響中文顯示-->
<input type="file" id="input-id" name="file" multiple="multiple" data-preview-file-type="text">
</div>
</body>
二、js代碼
$(document).ready(function(){
//0.初始化fileinput
var oFileInput = new FileInput();
oFileInput.Init("input-id", "/uploadMyFile");//第一個參數是input輸入的id，第二個是上傳的url
});
var FileInput = function () {
var oFile = new Object();
//初始化fileinput控件（第一次初始化）
oFile.Init = function(ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
//初始化上傳控件的樣式
control.fileinput({
language: 'zh', //設置語言
uploadUrl: uploadUrl, //上傳的地址
allowedFileExtensions: ['gif','jpg', 'png','txt','doc'],//接收的文件後綴
showUpload: true, //是否顯示上傳按鈕
showCaption: false,//是否顯示標題
browseClass: "btn btn-primary", //按鈕樣式
//dropZoneEnabled: false,//是否顯示拖拽區域
//minImageWidth: 50, //圖片的最小寬度
//minImageHeight: 50,//圖片的最小高度
//maxImageWidth: 1000,//圖片的最大寬度
//maxImageHeight: 1000,//圖片的最大高度
maxFileSize: 300,//單位爲kb，如果爲0表示不限制文件大小
//minFileCount: 0,
layoutTemplates :{
actionUpload:'',//去除上傳預覽縮略圖中的上傳圖片；
actionZoom:''//去除上傳預覽縮略圖中的上傳圖片；
},
maxFileCount: 10, //表示允許同時上傳的最大文件個數
enctype: 'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "選擇上傳的文件數量({n}) 超過允許的最大數值{m}！"
});
$("#input-id").on('filepreupload', function(event, data, previewId, index) { //上傳中
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.reader;
console.log('文件正在上傳');
});
$("#input-id").on("fileuploaded", function (event, data, previewId, index) { //一個文件上傳成功
console.log('文件上傳成功1！');
});
$("#input-id").on('fileerror', function(event, data, msg) { //一個文件上傳失敗
console.log('文件上傳失敗！'+data);
});
}
return oFile;
三、後臺controller
/**
* 上傳文件
* @param request
* @param response
* @param file 上傳的文件，支持多文件
* @throws Exception
*/
@RequestMapping("/uploadMyFile")
public void insert(HttpServletRequest request,HttpServletResponse response,@RequestParam("file") MultipartFile[] file) throws Exception{
PrintWriter writer = response.getWriter();
if(file!=null&&file.length>0){
//組合image名稱，“;隔開”
List<String> fileName =new ArrayList<String>();
try {
for (int i = 0; i < file.length; i++) {
if (!file[i].isEmpty()) {
//上傳文件，隨機名稱，";"分號隔開
fileName.add(FileUtil.uploadImage(request, "/upload/"+TimeUtils.formateString("yyyy-MM-dd")+"/", file[i], true));
}
}
//上傳成功
if(fileName!=null&&fileName.size()>0){
Gson gson = new Gson();
String json = gson.toJson("");//得到最大值後將其寫入前端，這裏暫時沒寫
writer.print(json);這裏必須是Json數據
}else {
writer.print("上傳失敗！文件格式錯誤！");這裏必須是Json數據
}
} catch (Exception e) {
e.printStackTrace();
writer.print("上傳出現異常！異常出現在：class.UploadController.insert()");這裏必須是Json數據
}
}else {
writer.print("沒有文件");這裏必須是Json數據
}
}
四、文件上傳的Utils
public class FileUtil {
/**
* 上傳文件
* 原名稱
* @param request 請求
* @param path_deposit 存放位置(路徑)
* @param file 文件
* @param isRandomName 是否隨機名稱
* @return 完整文件路徑
*/
public static String uploadImage(HttpServletRequest request,String path_deposit,MultipartFile file,boolean isRandomName) {
//上傳
try {
String[] typeImg={"gif","png","jpg","txt","doc"};
if(file!=null){
String origName=file.getOriginalFilename();// 文件原名稱
System.out.println("上傳的文件原名稱:"+origName);
// 判斷文件類型
String type=origName.indexOf(".")!=-1?origName.substring(origName.lastIndexOf(".")+1, origName.length()):null;
if (type!=null) {
boolean booIsType=false;
for (int i = 0; i < typeImg.length; i++) {
if (typeImg[i].equals(type.toLowerCase())) {
booIsType=true;
}
}
//類型正確
if (booIsType) {
//存放圖片文件的路徑
String path=request.getSession().getServletContext().getRealPath(path_deposit);
//組合名稱
String fileSrc="";
//是否隨機名稱
if(isRandomName){
origName=TimeUtils.formateString("yyyy-MM-dd-")+UUID.randomUUID().toString()+origName.substring(origName.lastIndexOf("."));
}
//判斷是否存在目錄
File targetFile=new File(path,origName);
if(!targetFile.exists()){
targetFile.mkdirs();//創建目錄
}
//上傳
file.transferTo(targetFile);
//完整路徑
fileSrc=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+path_deposit+origName;
System.out.println("圖片上傳成功:"+fileSrc);
return fileSrc;
}
}
}
return null;
}catch (Exception e) {
e.printStackTrace();
return null;
}
}
}
五、pom中需要添加的包
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.3</version>
</dependency>
六、Springmvc的配置
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8"></property>
<property name="maxUploadSize" value="10485760000"></property>
<property name="maxInMemorySize" value="40960"></property>
</bean>