使用Uploadify插件上传文件（兼容火狐）

本文主要是介绍使用Uploadify插件上传文件（兼容火狐），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文件上传是web项目常见的功能模块，但是基于服务器安全和存储的考虑，一般需要限制上传文件的类型和文件的大小。但是现存的js验证文件大小的方法很少有能够兼容多个浏览器的，尤其ie9+想要验证文件的大小就必须需要降低浏览器的安全性，否则就会出现上传失败的情况，用户的体验很不好。
在此介绍一个上传文件插件（Uploadify），它可以实现文件大小和格式的限制，不过前提是浏览器有Flash插件或者是HTML5。

项目配置

先去官网下载uploadify包解压缩后放到一个文件夹下，引入到项目中。
http://www.uploadify.com/download/

这里写图片描述

前端代码

<input id="file_upload_1" style = "line-height: 6px;" type="file" name="myfile"  value = "上传"/> <script type="text/javascript">$(function() {var result=0;$("#file_upload_1").uploadify({height : 30,swf : '${pageContext.request.contextPath }/uploadify/uploadify.swf','fileSizeLimit': '1MB',//上传附件大小,0不限制,5120B/512KB/2MB/1GB'fileTypeDesc': '支持的格式：*.jpg;*.jpge;*.gif;*.png','fileTypeExts': '*.jpg;*.jpge;*.gif;*.png',//上传附件后缀限制,*.*不限制width  : 120,multi:false,'fileObjName' : 'myFile', buttonText : '单张上传' ,uploader  : '<%=basePath%>/pub/FileUpload/upload.do;jsessionid=${pageContext.session.id}',//'jsessionid'这段可以兼容火狐浏览器//没有兼容的FLASH时触发'onFallback':function(){alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");},'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {//有时候上传进度什么想自己个性化控制，可以利用这个方法//使用方法见官方说明},// 选择上传文件后调用'onSelect' : function(file) {result++;if(result>1){alert("您只能上传一张图片！");var qs=$('#file_upload-queue>div');//所有的队列var id=qs.eq(1).attr('id');//得到第三个队列的id$('#file_upload_1').uploadify('cancel',id);//这样就行了，会自动重置队列数量和删除dom对象，不能直接qs.eq(2).remove()，无效} return false;},'overrideEvents': ['onSelectError', 'onDialogClose'],//保证提示语句只出现一次   'onUploadSuccess':function(file,data,response){alert(data);//文件名称},//上传失败 //附件格式不正确，请上传JPG、BMP、PNG格式文件，大小不超过3MB'onSelectError':function(file, errorCode){switch(errorCode) {case -100:alert("上传的文件数量已经超出系统限制的"+$('#file_upload_1').uploadify('settings','queueSizeLimit')+"个文件！");break;case -110:alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload_1').uploadify('settings','fileSizeLimit')+"大小！");break;case -120:alert("文件 ["+file.name+"] 大小异常！");break;case -130:alert("文件 ["+file.name+"] 类型不正确！");break;};}});});</script>

文件替换可以在‘onUploadSuccess’方法中加入以下代码

 var curLimit = $("#file_upload_1").uploadify('settings','uploadLimit');			$("#file_upload_1").uploadify('settings','uploadLimit',curLimit+1);

去掉以下代码:

'onSelect' : function(file) {result++;if(result>1){alert("您只能上传一张图片！");var qs=$('#file_upload-queue>div');

“uploader”标签为后台处理文件的方法，引入文件的地方修改相应路径。

后台java代码

：

@Controller
@RequestMapping("/pub/FileUpload")
public class FileUploadUtil {@RequestMapping("/upload")@ResponseBodypublic void writeInfo(HttpServletRequest request,HttpServletResponse response) throws IOException {HttpSession session = request.getSession();String string = (String) request.getAttribute("refersh");System.out.println(string);// String ip=request.getLocalAddr();String id = session.getId();System.out.println(id);// System.out.println(ip);// 上传附件MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;MultipartFile file = multipartRequest.getFile("myFile");// 获取服务器地址ServletContext sc = request.getSession().getServletContext();// 附件存放服务器路径String dir = sc.getRealPath("/upload/" + id + "/");// 某一文件夹路径String filename = request.getContextPath() + "/upload/" + id;// 如果文件夹不存在，则创建文件夹if (!new File(dir).exists()) {new File(dir).mkdirs();}String fileName = file.getOriginalFilename();String realName = fileName.substring(0, fileName.indexOf("."));// 防止文件被覆盖，以纳秒生成文件名称Long _l = System.nanoTime();String _extName = fileName.substring(fileName.indexOf("."));fileName = _l + _extName;String uploadPath = request.getContextPath() + "/upload/" + id + "/"+ fileName;// 存储格式为：/项目名/upload/yingjiwuzhi/43038800303864.log// 存储到数据库的相对路径String responseStr = "";try {FileUtils.writeByteArrayToFile(new File(dir, fileName),file.getBytes());// 服务器中生成文件} catch (IOException e) {e.printStackTrace();}response.getWriter().print(fileName);}