文档章节

Flash上传组件之SWFUpload文件上传

JavaSwing
 JavaSwing
发布于 2016/11/29 11:09
字数 1743
阅读 139
收藏 2

一、什么是SWFUpload?

SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合FlashJavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input type="file" />标签的文件上传模式。

目前此项目放在:https://code.google.com/p/swfupload/

对应的中文API:http://leeon.me/upload/other/swfupload.html

由于SWFUpload是falsh和JavaScript结合开发的,这可能在HTML5流行的今天可能不太适合。而且SWFUpload和官网早就不更新了。推荐使用另一个插件Plupload,这个插件会自动检测当前浏览器适合的上传方式:HTML5、Flash、Silverlight。

SWFUpload的主要特点:

* 可以同时上传多个文件;

* 类似AJAX的无刷新上传;

* 可以显示上传进度;

* 良好的浏览器兼容性;

* 兼容其他JavaScript库 (例如:jQuery, Prototype等);

* 支持Flash 8和Flash 9;

SWFUpload不同于其他基于Flash构建的上传工具,它有着优雅的代码设计,开发者可以利用XHTMLCSS和JavaScript来随心所欲的定制它在浏览器下的外观;它还提供了一组简明的JavaScript事件,借助它们开发者可以方便的在文件上传过程中更新页面内容来营造各种动态效果。

二、一般的开发流程

1、引入对应的JS和CSS文件。

2、实例化SWFUpload对象,进行对象的初始化的配置。

3、浏览网页,打开并选取要上传的文件。

4、后台接收前台传送的文件流,进行处理。

5、后台返回对应的参数并进行前台提示。

这是我做的一个例子效果如下:

例一:

image

例二:

image

例一的代码:

index.jsp

<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>swfUpload上传文件(Java和Jquery)</title>
    <script type="text/javascript" src="jquery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="swfupload/swfupload.js"></script>
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="swfPlaceHold">
</div>
<ol id="fileList">
</ol>
<input type="button" value="上传" id="submit">
</body>
<script type="text/javascript" src="swfupload/swfuploadHandlers.js"></script>
</html>

swfuploadHandlers.js

/**
 * Created by zhang on 14-2-25.
 */
var queueErrorArray;
var setting = {
    upload_url: "/upload",       //后台处理的程序路径
    flash_url: "swfupload/swfupload.swf", //swf程序路径
    file_types: "*.jpg;*.png;*.gif;*.mp4;*.wmv",     //允许上传文件种类
    file_types_description: "Web Image", //对上传文件的描述
    file_size_limit: "200MB",         //文件上传的大小单位默认为KB
    file_upload_limit: 0,

    //debug
    debug: false,

    //handlers
    file_dialog_start_handler: fileDialogStar,   //打开选择对话框触发的事件
    file_queued_handler: fileQueued,             //把文件加入上传队列触发的事件
    file_queue_error_handler: fileError,       //文件加入队列错误时触发的事件
    file_dialog_complete_handler: fileDialogComplete, //文件选择完成触发的事件
    upload_start_handler: uploadStar,               //文件上传触发的事件
    upload_progress_handler: uploadprogress,        //上传中触发的事件
    upload_complete_handler: uploadComplete,        //上传完成触发的事件
    upload_success_handler: uploadSuccess,         //上传成功时触发的事件

    //button
    button_placeholder_id: "swfPlaceHold",
    button_text: "请选择上传文件",
    button_width: 270,
    button_height: 20,
    button_cursor: SWFUpload.CURSOR.HAND,
    button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT
};

var swfup = new SWFUpload(setting);

/*********************************************handler************************************/

/**
 * 打开文件对话框时的触发的事件
 */
function fileDialogStar() {
    if (queueErrorArray) {
        queueErrorArray = null;
    }
}

/**
 * 文件加入上传队列时触发的事件
 * @param 选择上传的文件对象
 */
function fileQueued(file) {
    var swfup = this;        //当前的swfupload实例对象
    var listItem = "<li id='" + file.id + "'>";
    listItem += "文件:<em>" + file.name + "</em>(" + Math.round(file.size / 1024) + "KB)<span id='progressValue'></span>";
    listItem += "<div id='progressBar'><div id='progress'></div></div>";
    listItem += "<p id='statue'></p><span id='cancle'></span></li>";
    $("#fileList").append(listItem);

    //按钮的取消事件
    $("li#" + file.id + " #cancle").click(function (e) {
        swfup.cancelUpload(file.id);
        $("li#" + file.id).remove();
    });
}

/**
 * 文件加入队列错误触发的事件
 * @param file上传的文件对象
 * @param errorCode返回的错误代码
 * @param msg 错误信息
 */
function fileError(file, errorCode, msg) {
    //错误队列数组
    if (!queueErrorArray) {
        queueErrorArray = [];
    }
    errorFile = {
        file: file,
        code: errorCode,
        error: ''
    };

    switch (errorCode) {
        case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
            errorFile.error = '文件大小超出限制';
            break;
        case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
            errorFile.error = '文件类型不允许';
            break;
        case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
            errorFile.error = '超出文件数量限制.';
            break;
        case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
            errorFile.error = '你选择的文件是空的';
            break;

        case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
            errorFile.error = '服务器出错';
            break;
        case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:
            errorFile.error = '程序没有设置upload_url属性';
            break;
        case SWFUpload.UPLOAD_ERROR.IO_ERROR:
            errorFile.error = '读取或传输文件时发生错误';
            break;
        case SWFUpload.UPLOAD_ERROR.ZERO_BYTE_FILE:
            errorFile.error = '文件为空文件';
            break;
        case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
            errorFile.error = '上传受到了安全方面的限制';
            break;
        case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
            errorFile.error = '上传出现错误';
            break;
        default :
            errorFile.error = '上传文件出错,错误代码:' + errorCode;
            break;

    }
    queueErrorArray.push(errorFile);
}

/**
 * 选择文件对话框关闭时触发,报告所选文件个数、加入上传队列文件数及上传队列文件总数
 * @param numSelected 选择的文件数目
 * @param numQueued 加入队列的文件数目
 * @param numTotalInQueued 上传文件队列中文件总数
 */
function fileDialogComplete(numSelected, numQueued, numTotalInQueued) {
    if (queueErrorArray && queueErrorArray.length) {    //如果有错误文件

        var table = $('<table><tr><td>文件</td><td>大小</td></tr></table>');
        for (var i in queueErrorArray) {
            var tr = $('<tr></tr>');
            var info = '<td>' + queueErrorArray[i].file.name + '<span style="color:red">(' + queueErrorArray[i].error + ')</span></td>'
                + '<td>' + queueErrorArray[i].file.size + 'bytes</td>';
            table.append(tr.append(info));
        }
        $('body').append(table);
    } else {
        this.startUpload();             //开始上传
    }

}

/**
 * 文件上传触发的事件
 * @param file一个文件对象
 */
function uploadStar(file) {
    if (file) {
        $('#fileList li#' + file.id).find('p#statue').text("上传中。。。。。");
        $('#fileList li#' + file.id).find('p#progress').width("0%");
    }
}

/**
 *文件上传过程Flash定时调用的方法用来返回当前上传的进度
 * @param file 上传文件对象
 * @param byteCompleted 上传的字节
 * @param byteTotal 总的字节
 */
function uploadprogress(file, byteCompleted, byteTotal) {
    var percentByte = Math.round((byteCompleted / byteTotal) * 100);    //当前进度
    $('#fileList li#' + file.id).find('span#progressValue').text(percentByte + "%");
    $('#fileList li#' + file.id).find('div#progress').css('width', percentByte + '%');

}


/**
 * 文件上传完毕并且服务器返回200状态码时触发
 * @param file 上传的文件
 * @param serverData
 * @param response
 */
function uploadSuccess(file, serverData, response) {
    var $item = $("#fileList li#" + file.id);
    $item.find('div#progress').css('width', '100%');
    $item.find('span#progressValue').css('color', 'blue').text('100%');
    $item.find('p#statue').html('上传完成!').css('color', 'green');
}

/**
 * 在一个上传周期结束后触发(uploadError及uploadSuccess均触发)
 * 在此可以开始下一个文件上传(通过上传组件的uploadStart()方法)
 * @param file 上传完成的文件对象
 */
function uploadComplete(file) {
    //判断队列中还有没有文件

    if (this.getStats().files_queued > 0) {
        this.startUpload();
    } else {
        this.cancelUpload(this.fileProgressID);
        $("#fileList li").remove();
    }
}

/********************************按钮事件绑定*********************************************/
$('#submit').click(function () {
    swfup.startUpload();
});

后台对应处理的Servlet

package com.zxd.tool;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import java.io.*;
import java.util.List;
import java.util.UUID;

/**
 * Created by zhang on 14-2-25.
 */
@WebServlet("/upload")
public class Upload extends HttpServlet {
    private File tempDir;   //临时路径
    private File saveDir;   //保存路径

    /**
     * servlet初始化事件
     *
     * @param config
     * @throws ServletException
     */
    public void init(ServletConfig config) throws ServletException {
        String uploadPath = config.getServletContext().getRealPath("/");
        StringBuffer sb = new StringBuffer(uploadPath);
        saveDir = new File(sb.append("\\upload").toString());
        tempDir = new File(sb.append("\\temp").toString());
        if (!saveDir.exists()) {
            saveDir.mkdir();
        }
        if (!tempDir.exists()) {
            tempDir.mkdir();
        }

    }

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
        this.doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {

        DiskFileItemFactory factory = new DiskFileItemFactory();
        factory.setSizeThreshold(1 * 1024 * 1024);      //设置缓冲区大小
        factory.setRepository(tempDir);             //设置临时保存目录
        ServletFileUpload sfu = new ServletFileUpload(factory); //Servelt文件上传对象
        sfu.setFileSizeMax(200 * 1024 * 1024);  //200M
        sfu.setHeaderEncoding("utf-8");
        List<FileItem> list = null;
        try {
            list = sfu.parseRequest(request);       //得到文件
        } catch (FileUploadException e) {
            e.printStackTrace();
        }
        int size = list.size();
        for (int i = 0; i < size; i++) {//循环保存文件
            FileItem file = list.get(i);
            if (file.isFormField()) {   //如果是表单字段
                String name = file.getFieldName();  // 获得该字段名称
                String value = file.getString("utf-8"); //获得该字段值
            } else {
                String extName = file.getName().substring(      //得到扩展名
                        file.getName().lastIndexOf("."));
                String fname = UUID.randomUUID()+extName;
                try {
                    file.write(new File(saveDir, fname));  // 写入文件
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }


    }

 

这就是swfupload的一些基本的参数和用法。

本文转载自:http://www.cnblogs.com/zxdBlog/p/3988813.html

JavaSwing
粉丝 21
博文 44
码字总数 8095
作品 0
杭州
程序员
私信 提问
客户端上传工具-SWFUpload

最近,在后台实现广告管理系统,有一个表单选项,想利用SWFUpload组件来实现。现在将该组件的认识和理解记录如下:方便有需要的同行查看. 一、首先来比较下目前的几种的客户端上传: 1、File表...

王锐
2012/09/18
1K
0
SWFUpload 上传组件的 Cookie 问题

SWFUpload 利用 flash 作 ajax 式后台文件上传, 提供强大事件订阅机制。不幸的是,很多时候接收文件上传数据的代码需要根据当前session来进行权限处理。在IE中没什么问题,在 FireFox 中会无...

小编辑
2010/03/12
3.2K
5
Flash 为什么无法访问浏览器的COOKIE呢?

不知道为什么Adobe不让Flash访问Cookie,或是浏览器不让访问? 项目#泡泡站长网#中大量使用 $user->getuser_id()来获取登录用户ID,包括上传文件命名的时候都会把用户ID包含到文件名中,导致...

OSC老司机
2013/05/01
231
1
SWFupload到底怎么了啊,求指点

遇到几个问题:SWFUpload.version = "2.5.0 2010-01-15 Beta 2"; 1、swfupload+struts2上传,结果从struts2里面的XXFileName中获取的文件名是这样“IMG_20140325_091550.jpg.jpg”,就是多了......

杨某某
2014/04/19
1K
3
关于flash,swfobject加载不上

我本机搭了一个开发环境 基于tomcat的javaweb工程,在一个页面里用swfupload完成文件上传功能。 在本机测试时 访问 http://localhost:9080/login.do 时候,flash能加载进来,页面加载的时候能...

duxiaodu
2017/08/16
99
0

没有更多内容

加载失败,请刷新页面

加载更多

shangcheng-my

1.数据库主键、外键类型为bigint,那么在后台应该用什么类型的变量定义? 后台用string接收,因为前段传过来的一般都是json字符串,后台直接接收,mysql是可以吧数字类型的字符串转换为对应的...

榴莲黑芝麻糊
昨天
2
0
微服务架构依赖图

基于spring-cloud-alibaba + dubbo

龙影
昨天
5
0
Centos7 安装zabbix-agent

rpm -i https://repo.zabbix.com/zabbix/4.2/rhel/6/x86_64/zabbix-release-4.2-2.el6.noarch.rpm 可以到https://repo.zabbix.com/zabbix找到对应的版本 yum install zabbix-agent -y 出现E......

abowu
昨天
8
0
文本编辑器GNU nano 4.4 发布

GNU nano 4.4 "Hagelslag" 更新日志: 启动时,光标可以放在第一个或最后一个出现位置 字符串前面带有+/string 或 +?string的字符串。 发生自动硬包装时((--breaklonglines),任何前导引号...

linuxCool
昨天
7
0
你知道字节序吗

字节序 最近在调一个自定义报文的接口时,本来以为挺简单的,发现踩了好几个坑,其中一个比较“刻骨铭心”的问题就是数据的字节序问题。 背景 自定义报文,调用接口,服务端报文解析失败 iO...

杭城小刘
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部