文件上传——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;
%>
<!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";
}

文件上传——ssi-uploader插件

猜你喜欢