文件上传——ssi-uploader插件

一般文件上传的流程：

选择文件-》将文件传递到后台-》输入流以字节方式读取文件-》输出流根据指定路径写入到服务器指定位置-》文件上传结束

 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;
%>










	

		

			

				

					

						

							
文件上传——ssi-uploader插件演示：
							修改ssi-uploader.js中861行,自定义可上传文件类型有：文档txt,doc,docx,xls,ppt,pptx,pdf;图片jpg,jpeg,png,bmp,gif;视频mp4,flv
						
						
						

							
1. 拖拽区域+ 效果图预览：
							
						
						

							
2. 拖拽区域+无预览图效果：
							
						
							
						

							
3.无拖拽区域+ 效果图预览：
							
						
											
					
				
			
		
	
	
	
	

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 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";
}