正文

JQuery上传插件Uploadify

IP云
IP云V管理员/4 阅读
10/27
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一：官网

http://www.uploadify.com/

二：引用

<link href="plug-in/uploadify3.2.1/uploadify.css" rel="stylesheet" />
<script type="text/javascript" src="plug-in/uploadify3.2.1/jquery.uploadify.min.js"></script>

三：例子

（1）前台页面

<tr> <td align="right"> <label class="Validform_label"> 主题图: </label> </td> <td class="value"> <input id="subjectMap" name="subjectMap" type="hidden" datatype="*" /> <table> <tr> <td> <input type="file" name="upload_org_code" id="upload_org_code"/> </td> <td> <img id="upload_org_code_img" src="" width="216" height="135"> <a id="del" style="display: none;" href="#" onclick="del()">删除</a> </td> </tr> </table> <span class="Validform_checktip">建议尺寸：720*360</span> </td></tr>

（2）上传JS

setTimeout(function(){ $("#upload_org_code").uploadify({ 'height' : 27, 'width' : 80, 'buttonText' : '图片上传', 'swf' : 'plug-in/uploadify3.2.1/uploadify.swf', 'uploader' : 'rouletteController.do?objUpload', 'auto' : true, 'multi' : false, 'removeCompleted':true, 'removeTimeout' : 1, 'cancelImg' : 'plug-in/uploadify3.2.1/uploadify-cancel.png', 'fileTypeExts' : '*.jpg;*.jpge;*.gif;*.png', 'fileSizeLimit' : '2MB', 'onUploadSuccess':function(file,data,response){ var json = eval('(' + data + ')'); var url=json.attributes.visiturl+json.attributes.fileName; $("#upload_org_code_img").attr("src",url); $("#subjectMap").val(json.attributes.fileName); $("#del").attr("style","display: block;"); }, //加上此句会重写onSelectError方法【需要重写的事件】 'overrideEvents': ['onSelectError', 'onDialogClose'], //返回一个错误，选择文件的时候触发 'onSelectError':function(file, errorCode, errorMsg){ switch(errorCode) { case -110: alert("文件 ["+file.name+"] 大小超出系统限制的" +jQuery('#upload_org_code').uploadify('settings', 'fileSizeLimit') + "大小！"); break; case -120: alert("文件 ["+file.name+"] 大小异常！"); break; case -130: alert("文件 ["+file.name+"] 类型不正确！"); break; } }, }); },10)

（3）上传后台代码

/**** * 图片上传 **/ @RequestMapping(params = "objUpload") @ResponseBody public AjaxJson objUpload(HttpServletRequest request) throws Exception { AjaxJson j = new AjaxJson(); Map<String, Object> attributes = new HashMap<String, Object>(); MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; Map<String, MultipartFile> fileMap = multipartRequest.getFileMap(); String tomcaturl = PropertiesConfig.getStringConfig("tomcaturl"); String roulette_sub_url = PropertiesConfig.getStringConfig("roulette_sub_url"); String visiturl = PropertiesConfig.getStringConfig("visiturl"); // 创建文件夹 File file = new File(tomcaturl+roulette_sub_url); if (!file.exists()) { file.mkdirs(); } String fileName = null; //String path = null; for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) { // 上传文件名 MultipartFile mf = entity.getValue(); fileName = mf.getOriginalFilename(); String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1) .toLowerCase(); SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss"); String newFileName = "roulette_" + df.format(new Date()) +"_bak"+ "." + fileExt; File uploadFile = new File(tomcaturl+roulette_sub_url+newFileName); try { FileCopyUtils.copy(mf.getBytes(), uploadFile); fileName = roulette_sub_url+newFileName; } catch (IOException e) { e.printStackTrace(); } } attributes.put("visiturl", visiturl); attributes.put("fileName", fileName); j.setAttributes(attributes); return j; }