【广告项目】ftp+uploadify实现图片多图片上传预览

ftp上传结合uploadify，实现图片上传并预览：

上传js:

 

$(function(){
	$('#appendFile1').delegate('.mailListDel1', 'click' ,function(){
 		var _this = $(this);
 		var el = _this.parent().remove();
 	})
var definedData = [];
definedData.fileTypeExts = "*.png;*.jpeg;*.gif;*.jpg";  
 $("#uploadAttach1").uploadify({
     'height'        : 20,//	设置浏览按钮的高度 
     'width'         : 80, 
     'buttonText'    : '添加图片',
     'swf'           : '${pageContext.request.contextPath}/plugin/uploadify.swf',
     'uploader'      : '${pageContext.request.contextPath}/daily/uploadAttach',
     'auto'          : true,
     'multi'         : true,//设置为true时可以上传多个文件。
    'removeCompleted': true, 
     'cancelImg'     : '${pageContext.request.contextPath}/plugin/cancel.png',
     'fileTypeExts'  : definedData.fileTypeExts,
     'fileSizeLimit' : '100MB',
     'fileObjName'   : 'file1', 
     'sizeLimit': '99999999999',
     'onUploadSuccess':function(file,data,response){
   	 		var jsonData = JSON.parse(data);
   	 		$.each(jsonData,function(i,v){
   	 		$("#uploadAttach-queue1").append(
   	 				"<div style='float:left;text-align:center; padding: 0 5px;'>"+"<img src='"+v.attachPath+"' alt='' style='width: 130px;height:100px'/><a href='#' class='mailListDel1 ' style='color:#929292;display:block;'> 删除 </a><input type='hidden' name='path1' value=" + v.attachPath + "><input type='hidden' name='attachNmaeArr1' value=" + v.attachName + "></div>"
   	 				)
   	 		})
     },
     //加上此句会重写onSelectError方法【需要重写的事件】
     'overrideEvents': ['onSelectError', 'onDialogClose'],
     //返回一个错误，选择文件的时候触发
     'onSelectError':function(file, errorCode, errorMsg){
         switch(errorCode) {
             case -110:
                 alert("文件 ["+file.name+"] 大小超出系统限制的" + jQuery('#uploadAttach1').uploadify('settings', 'fileSizeLimit') + "大小！");
                 break;
             case -120:
                 alert("文件 ["+file.name+"] 大小异常！");
                 break;
             case -130:
                 alert("文件 ["+file.name+"] 类型不正确！");
                 break;
         }
     },
     
 }); 
	 $(".cancle").hide();
})

html部分：

 

 

<div class="full">
        <span class="formContentName lf">刊物信息：</span>
	<div  id="appendFile1" style=" box-sizing: border-box;padding-left:135px">
	<div>
	<input  type="file"  id="uploadAttach1" name="files1" />
	<div id="uploadAttach-queue1" class="uploadify-queue1"></div>
	</div>
	</div>
</div>	<div  id="appendFile1" style=" box-sizing: border-box;padding-left:135px">
	<div>
	<input  type="file"  id="uploadAttach1" name="files1" />
	<div id="uploadAttach-queue1" class="uploadify-queue1"></div>
	</div>
	</div>
</div>

后台上传部分：

 

 

@RequestMapping("uploadAttach") 
	public void  uploadAttach(final HttpSession session,HttpServletRequest request, HttpServletResponse response) throws IOException{
		List<TaMail> list = new ArrayList<TaMail>();
        MultipartHttpServletRequest multipartRequest =  (MultipartHttpServletRequest) request;  
        Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();      
        String fileName = null;   
        for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {  
        //获得源文件,上传到服务器,返回文件名称和路径;
        MultipartFile mf = entity.getValue();    
        fileName = mf.getOriginalFilename();//获取原文件名  
		if(fileName.length() > 0){
			TaMail mail = new TaMail();
			Date now = new Date();
			SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd");
			String filePath = dateFormat.format(now);
			String newName = UUID.randomUUID().toString();
			String subfix = fileName.substring(fileName.lastIndexOf("."));
			Boolean flag = FtpUtil.uploadFile(ftpIp, ftpPort, ftpUserName, ftpPassword, ftpRemotePath,
					filePath, newName+subfix, mf.getInputStream());
			final String attachPath= new String(httpUrl+filePath+"/"+newName+subfix);
			mail.setAttachName(fileName);
			mail.setAttachPath(attachPath);
			list.add(mail);
			}  
        }
        response.setCharacterEncoding("UTF-8");  
        response.setContentType("application/json; charset=utf-8");   
        response.getWriter().write(JsonUtils.objectToJson(list)); 
	}

效果图：