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

好了，基本的使用方法就到这里了