JQuery插件之uploadify

uploadify是一款用于上传文件的JQuery插件,使用它在选择文件后有一个进度条用于显示用户选择了什么文件。

使用方法

1.引入资源文件

<script src="js/jquery-1.11.1.js" type="text/javascript"></script>
<script src="js/uploadify/jquery.uploadify-3.2.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="js/uploadify/uploadify.css">

2.创建一些HTML元素便于使用uploadify(id为queue的div的作用是  显示用户选择的文件列表，并提供一个进度条，当用户选择上传时即可根据进度条查看文件上传的程度,值之所以要为queue,是因为在调用type=file的uploadify方法时传入的"queueID"的值是"queue")

<div id="queue"></div>

<input id="file_upload" name="file_upload" type="file" multiple="true" />
<a href="javascript:$('#file_upload').uploadify('upload')">开始上传</a> 
<a href="javascript:$('#file_upload').uploadify('cancel')">取消所有上传</a>

3.写一些JQuery代码

$(function() {
            var timestamp = new Date().getTime();
            $('#file_upload').uploadify({
                'formData' : {
                    'timestamp' : timestamp,
                    'token' : 'unique_salt' + timestamp
                },// 设置想后台传递的参数 如果设置该参数，那么method应该设置为get，才能得到参数
                'swf' : 'js/uploadify/uploadify.swf',// 指定swf文件
                'uploader' : 'url',// 后台处理的页面
                'cancelImg' : 'js/uploadify/uploadify-cancel.png',// 取消按钮图片路径
                "queueID" : 'queue',// 上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false  自动生成,  不带#
                'method' : 'get',// 设置上传格式
                'auto' : false,// 当选中文件后是否自动提交
                'multi' : false,// 是否支持多个文件上传
                'removeCompleted':false,
                'buttonText' : '选择文件',// 按钮显示的文字 
                uploadLimit:1,

		fileObjName:'uploadfile',//这个文件对象的name为uploadfile
                fileSizeLimit:1024 * 10,
                'onUploadSuccess': function (file, data, response) {// 上传成功后执行
                   /* $('#' + file.id).find('.data').html(' 上传完毕');*/
                   console.log(file);
                 }
            });
        });

4.上面一段JS代码的作用是初始化uploadify的一些参数，当设置好了这些参数后，再调用uploadify的一些方法即可使用

5.下面提供一段java后台代码

// 获得参数
        String timestamp = request.getParameter("timestamp");
        String token = request.getParameter("token");
        System.out.println(timestamp);
        System.out.println(token);
        // 获得文件
        String savePath = this.getServletConfig().getServletContext()
                .getRealPath("");
        savePath = savePath + "/uploads/";
        File f1 = new File(savePath);
        
        System.out.println(savePath);
        
        if (!f1.exists()) {
            f1.mkdirs();
        }
        DiskFileItemFactory fac = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(fac);
        upload.setHeaderEncoding("utf-8");
        List fileList = null;
        try {
            fileList = upload.parseRequest(request);
        } catch (FileUploadException ex) {
            System.out.println(ex.getMessage());
            return;
        }
        
        Iterator<FileItem> it = fileList.iterator();
        String name = "";
        String extName = "";
        while (it.hasNext()) {
            FileItem item = it.next();
            if (!item.isFormField()) {
                name = item.getName();
                long size = item.getSize();
                String type = item.getContentType();
                System.out.println(size + " " + type);
                if (name == null || name.trim().equals("")) {
                    continue;
                }

                // 扩展名格式：
                if (name.lastIndexOf(".") >= 0) {
                    extName = name.substring(name.lastIndexOf("."));
                }

                File file = null;
                do {
                    // 生成文件名：
                    name = UUID.randomUUID().toString();
                    file = new File(savePath + name + extName);
                } while (file.exists());
                File saveFile = new File(savePath + name + extName);
                try {
                    item.write(saveFile);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
        response.getWriter().print(name + extName);

6.本人使用过程中遇到过的错误

• 使用Chrome时，uploadify插件出现错误，错误原因是Chrome的Flash过期了或者Chrome版本过高
• 小demo一直未能成功，不是代码的问题，而是浏览器的问题，更换浏览器试试。
• uploadify有许多属性，方法，事件，请另行查阅资料。