使用uploadify组件上传文件

最新推荐文章于 2024-07-03 15:25:11 发布

mockingbirds

最新推荐文章于 2024-07-03 15:25:11 发布

阅读量9.9k

点赞数 2

分类专栏： jquery 文章标签：批量上传上传异步 jquery插件

本文链接：https://blog.csdn.net/mockingbirds/article/details/46845273

版权

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

uploadify是和jQuery结合使用的异步上传组件，主要功能是批量上传文件，使用多线程来上传多个组件。

下载并导入js和样式文件

在正式学习uploadify组件之前，首先就是去官网下载最新的js和css等。
http://www.uploadify.com/download/
这里写图片描述
解压后如图：上面使用红色标示的文件是需要引入到项目中的。另外别忘了引入jquery.js文件

html页面以及上传条件的编写

<html>
  <head>
    <base href="<%=basePath%>">
    <title>jquery upload</title>
    <link rel="stylesheet" href="uploadfy/uploadify.css" type="text/css"></link>  
    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="uploadfy/jquery.uploadify.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#uploadify").uploadify({
                //指定swf文件
                'swf': 'uploadfy/uploadify.swf',
                //后台处理的页面
                'uploader': 'UploadServlet',
                'progressData' : 'speed',
                //按钮显示的文字
                'buttonText': '上传文件',
                //显示的高度和宽度，默认 height 30；width 120
                //'height': 15,
                //'width': 80,
                //上传文件的类型  默认为所有文件    'All Files'  ;  '*.*'
                //在浏览窗口底部的文件类型下拉菜单中显示的文本
                'fileTypeDesc': 'Image Files',
                //允许上传的文件后缀
                //'fileTypeExts': '*.gif; *.jpg; *.png',
                'cancel': 'uploadfy/uploadify-cancel.png',
                //上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false  自动生成,  不带#
                //'queueID': 'fileQueue',
                //选择文件后自动上传
                'auto': true,
                //设置为true将允许多文件上传
                'multi': true,
                'onUploadComplete' : function(file) {
                     alert('上传完成');
                 },
                'onCancel' : function(file) {
                     alert('取消上传');
                 }
            });
        });

    </script>
  </head>

  <body>
    <a id="uploadify">开始上传</a>
    <a href="javascript:$('#uploadify').uploadify('cancel')">取消上传</a>
  </body>
</html>

这里有大量的属性，我这里也只是列出了一些常用的，具体的可以参考官网的文档：
http://www.uploadify.com/documentation/
这里写图片描述
可以看到官网给我们提供了每一个属性的详细用法。在这里我就不一一赘述了。

UploadServlet 实现

String savePath = this.getServletConfig().getServletContext()
                    .getRealPath("");
            savePath = savePath + "\\uploads\\";
            File f1 = new File(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(req);
            } catch (FileUploadException ex) {
                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 = System.currentTimeMillis()+"";
                        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();
                    }
                }
            }
            resp.getWriter().print(name + extName);