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

来源：互联网发布：php看什么书编辑：程序博客网时间：2024/05/22 10:42

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>

后台上传部分：

@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)); }

效果图：

阅读全文

1 0