java上传视频图片，使用layer弹窗预览

朱雀 2020-10-01 02:19 807阅读 0赞

一、JSP代码

二、JS代码（上传后在线点击预览）

三、js代码（上传保存到服务器后预览）

$('body').on("click", "#file_upload", file_upload);
        function file_upload(){
            for(var i in m_obj_upload){
                var data = new FormData();
                data.append('userfile',m_obj_upload[i]);
                $.ajax({
                    type:'POST',
                    url:"jee/EmergencyC/emergencyUpload",
                    data:data,
                    async:false,
                    processData: false, //一定要加否则后台会接收不到
                    contentType : false, //一定要加否则后台会接收不到
                    mimeType:"multipart/form-data",
                    success:function(data){
                        var obj = JSON.parse(data);
                        if(obj.status=="success"){
                            alert("上传成功!");
                        }
                    }
                });
             }
        }

四、java-controller代码

@RequestMapping(value="jee/EmergencyC")
    @Controller
    public class EmergencyController{
    	/**
    	 * 
    	 * @Date 2018年8月22日 上午11:44:33
    	 * @Description 应急处置-图片视频上传操作 
    	 * @Fcunction emergencyUpload
    	 * @param userfile
    	 * @return ReturnDatas
    	 *
    	 */
    	@RequestMapping(value="emergencyUpload",method=RequestMethod.POST)
    	@ResponseBody
    	@SystemControllerLog(description="应急处置-图片视频上传操作")
    	public ReturnDatas emergencyUpload(MultipartFile userfile){
    		ReturnDatas returnDatas = ReturnDatas.getSuccessReturnDatas();
    		try {
    			returnDatas.setData(emergencyService.emergencyUpload(userfile));
    		}catch (Exception e) {
    			e.printStackTrace();
    			LogUtil.error("应急处置-图片视频上传操作异常："+e.getMessage(),e);
    			returnDatas.setStatus(ReturnDatas.ERROR);
    			returnDatas.setMessage("应急处置-图片视频上传操作异常");
    		}
    		return returnDatas;
    	}
    }

五、java-serviceimpl代码

/**
    	 *
    	 * @Description 应急处置-图片视频上传操作
    	 * @param userfile
    	 * @return String
    	 * @throws Exception
    	 *
    	 */
    	@Override
    	public String emergencyUpload(MultipartFile userfile) throws Exception {
    		String fileName = userfile.getOriginalFilename();
    		String type = "imgs/";
    		if(fileName.indexOf(".")>-1){
    			String[] successType = {"avi","wmv","vob","mp4","mov","mkv","flv","rmvb","AVI","WMV","VOB","MP4","MOV","MKV","FLV","RMVB","jpg","jpeg","bmp","png","gif","JPG","JPEG","BMP","PNG","GIF"};
    			String[] arrFlie = fileName.split("\\.");
    			int arrLength = arrFlie.length;
    			String flieType = arrFlie[arrLength-1];
    			if(StringUtils.isNotBlank(flieType)){
    				for (int i = 0; i < successType.length; i++) {
    					if(flieType.equals(successType[i])){
    						if(i>15){
    							type = "imgs/";
    						}else {
    							type = "videos/";
    						}
    					}
    				}
    			}
    		}            
    		byte[] data = userfile.getBytes();//data即图片的子节文件
    		String path = virtualDir+virtualPro+type;
    		File fliePath = new File(path);
    		fliePath.mkdirs();
    		File file = new File(fliePath,fileName);
    		FileOutputStream out = new FileOutputStream(file);
    		out.write(data);//将data中全部的数据写到文件
    		out.close();
    		return path+fileName;
    	}

注：

保存到数据库里的路径为D:/javaX64/apache-tomcat-8.0.30/webapps/kysc/imgs/QQ截图20180822143333.png，tomcat运行项目点击弹窗预览时需要http://127.0.0.1:8080/kysc/imgs/QQ截图20180822143333.png；

http在jsp获取可以使用request.getScheme()；

<%String basePath = request.getScheme() + "://127.0.0.1:8080/";%>