jquery-uploadify3.2使用心得
最近做文件上传，使用了jquery-uploadify插件，用的是官网最新的3.2版本，官网地址：http://www.uploadify.com/download/
在这里建议下：在面对最新的版本的时候，最好是去它的官网查看文档，同时借鉴下别人写的旧版本的使用心得，这样就能快速的上手了，好了，言归正传，let's go
解压下载的文件到任意一个目录下面，文件夹名称为uploadify,最好是自己重命名一下，在后面加上版本号；文件内容如下
官方给的是php的示例，这里我用的java所以就不看了，直接删了只留下以下文件：
接下来就是如何使用了，首先，在页面加入引用，主要是三个文件，一个是jquery必不可少的，另外两个就是插件文件夹下面的了，这个插件文件夹可以拷贝到自己的项目路径下，如我的就是在项目根目录下的js文件里面，同时要在根目录下面建立一个img文件夹，将上图中的uploadify-cancel.png图片放进去，这样子可以解决插件取消文件队列报错找不到图片的错误
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <link rel="stylesheet" type="text/css" href="./js/uploadify/uploadify.css"> <script type="text/javascript" src="./js/uploadify/jquery.uploadify.js"></script>
这里图片路径一定要是对的，还有一个要注意的问题就是jquery冲突 问题，在很多时候做页面的时候，我们都是喜欢引入头部，底部两个页面，问题就在这里，如果你的主页面也就是需要用到插件的页面引入了这两个页面的话，必须保证这两个页面中没有引入多余的jquery.js文件，不然就会导致出现$(..).uploadify not a function 的错误。切记，这是我亲自尝过的苦啊。
接下来就是渲染上传按钮的操作了，代码如下：
页面HTML
<tr> <td class="align_right"> <em><font color="red">*</font></em> <label>上传写真照</label> </td> <td class="input_style"> <div class="upload_div"> <input id="upload_photo" class="upload_button" type="button" value="本地上传"/> <input type="hidden" id="userPhoto" name="userPhoto"/> <div id="photo_queue"></div> <p>最多上传10张照片，尺寸480*800，格式jpg或png可批量上传</p> </div> </td> </tr>
JS文件
$("#upload_photo").uploadify({
//按钮额外自己添加点的样式类.upload
'buttonClass' : 'upload',
//限制文件上传大小
'fileSizeLimit' : '2MB',
//文件选择框显示
'fileTypeDesc' : '选择图片',
//文件类型过滤
'fileTypeExts' : '*.jpg;*.png',
//按钮高度
'height' : '30',
//按钮宽度
'width' : '100',
//请求类型
'method' : 'post',
//是否支持多文件上传
'multi' : true,
//需要重写的事件
'overrideEvents' : ['onDialogClose','onSelectError','onUploadError'],
//队列ID，用来显示文件上传队列与进度
'queueID' : 'photo_queue',
//队列一次最多允许的文件数，也就是一次最多进入上传队列的文件数
'queueSizeLimit' : 10,
//上传动画，插件文件下的swf文件
'swf' : './js/uploadify/uploadify.swf',
//处理上传文件的服务类
'uploader' : '/UploadFileServlet?type=photo&uploadPath=' + userId + '\\' + appId,
//上传文件个数限制
'uploadLimit' : 10,
//上传按钮内容显示文本
'buttonText' : '图片上传',
//自定义重写的方法，文件上传错误触发
'onUploadError' : uploadify_onUploadError,
//文件选择错误触发
'onSelectError' : uploadify_onSelectError,
//文件队列上传完毕触发
'onQueueComplete' : heightReset,
//队列开始上传触发
'onUploadStart' : heightFit,
//单个文件上传成功触发
'onUploadSuccess' : function(file, data, response){
$("#userPhoto").attr("value",data);
//恢复原始高度
}
});
这里有个小问题就是：'queueSizeLimit' 和 'uploadLimit'这两个参数配置的效果是一样的，而且哪个配置的小，就是按照哪个来的，也就是说想通过插件来实现限制上传文件个数是不现实的，这个必须结合后台程序才能限制总的文件上传个数。可以在'onUploadStart'中通过ajax请求后台程序，返回文件个数，然后在做相应的处理
后台处理文件上传服务类：
public Map<String, String> uploadPackage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //使用apache开源组织下的commons-fileupload-1.2.jar组件做文件上传 String projectPath = PathTool.getWebRootPath(); String tempPath = projectPath + "uploadFile/temp"; Map<String, String> params = new HashMap<String, String>(); try { DiskFileItemFactory factory = new DiskFileItemFactory(); //设置文件缓冲区大小 factory.setSizeThreshold(1024 * 1024); //超过缓冲区大小，临时文件放在什么地方 factory.setRepository(new File(tempPath)); //2、使用文件上传工厂，创建一个文件上传的servlet对象；解析表单，保存到list里面 ServletFileUpload upload = new ServletFileUpload(factory); //允许上传的大小，以字节为单位 upload.setFileSizeMax(1024 * 1024 * 1024); //设置编码格式 upload.setHeaderEncoding("UTF-8"); // 得到所有的表单域，它们目前都被当作FileItem List<FileItem> items = upload.parseRequest(request); Iterator<FileItem> iter = items.iterator(); // 依次处理请求 while (iter.hasNext()) { FileItem item = iter.next(); if (item.isFormField()) { // 如果是普通的表单域 /* "处理普通表单内容 ... */ String name = item.getFieldName(); String value = new String(item.getString().getBytes("ISO-8859-1"), "utf-8"); params.put(name, value); } else { /* 如果是文件上传表单域 */ // 1.获取文件名 String fileName = item.getName(); String fieldName = item.getFieldName(); //文件域名称 String contentType = item.getContentType(); //文件类型 if (fileName != null & !"".equals(fileName)) { System.out.println("文件域名称：" + fieldName + "\n文件名：" + fileName + "\n文件类型：" + contentType); //获取文件后缀名 String suffix = fileName.substring(fileName.lastIndexOf(".")+1); // 2.先将上传文件保存到本地硬盘上 ServletContext context = this.getServletContext(); String dir = ""; //=======将上传的文件存放到服务器的专门的文件夹下：uploadfile============ Date date = new Date(); SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddhhmmss"); fileName = sdf.format(date) + fileName; //这里判断文件类型 //以应用id做为文件夹分类 if("png".equals(suffix) || "jpg".equals(suffix)){ dir = context.getRealPath("uploadFile/photo/"); } if("mp3".equals(suffix)){ dir = context.getRealPath("uploadFile/music/"); } dir += appId; System.out.println(dir); File file = new File(dir,fileName); //当且仅当不存在具有此抽象路径名指定名称的文件时，不可分地创建一个新的空文件 file.createNewFile(); // 获得流，读取数据写入文件 InputStream in = item.getInputStream(); FileOutputStream fos = new FileOutputStream(file); int len = 0; byte[] buffer = new byte[1024]; // 3.获取本地文件的绝对路径 while ((len = in.read(buffer)) > 0){ fos.write(buffer, 0, len); } // 关闭资源文件操作 fos.close(); in.close(); // 删除临时文件 item.delete(); //new FtpUploadThread(filepath, "handbb_down", fileName).run(); //这里判断是图片还是mp3文件 if("png".equals(suffix) || "jpg".equals(suffix)){ photo += fileName + ","; } if("mp3".equals(suffix)){ music += fileName + ","; } // 7.删除本地文件 //file.delete(); } else {// 修改操作时，如果没有上传文件 // if("icon_url".equalsIgnoreCase(fieldName)){ // } // if("download_url".equalsIgnoreCase(fieldName)){ // } } } } params.put("photo", photo); params.put("music", music); } catch (Exception e) { e.printStackTrace(); } return params; }
好了，基本的使用方法就到这里了
