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有许多属性，方法，事件，请另行查阅资料。