SWFUpload 带样式、进度条上传控件支持IE8

最新推荐文章于 2020-12-18 16:12:15 发布
最新推荐文章于 2020-12-18 16:12:15 发布
阅读量750 收藏 1
点赞数
分类专栏： java 软件文档 文章标签： SWFUpload  SWFUpload带样式 SWFUpload 进度条 SWFUpload 上传控件 SWFUpload 支持IE8
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mjxin123456/article/details/84025485
版权 
框架是采用的easyui，这个是带单点选择的上传，支持IE8，需要的友友可以自行修改，上传成功自动关闭串口


​​​​​​​<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<div style="padding:5px;">
    <form method="post" enctype="multipart/form-data">
        <div>
            <table class="form-table">
                <tr height="50" valign="middle">
                    <td width="98%">
                        <input type="radio" name="dataType" value="asset"/>哈哈1
                        <input type="radio" name="dataType" value="prop"/>哈哈2
                        <input type="radio" name="dataType" value="tree"/>哈哈3
                        <input type="radio" name="dataType" value="geometry"/>哈哈4
                       
                    </td>
                </tr>
            </table>
        </div>
        <input type="hidden" id="contextPath" value="<%=request.getContextPath() %>"/>
        <div id="swfupload">
            <span id="spanButtonPlaceholder"></span><div id="divFileCount"></div>
            <p id="queueStatus"></p>
            <ol id="logList"></ol>
        </div>
    </form>
</div>
<script type="text/javascript" src="<spring:url value="/_js/swfupload/swfupload.js"/>"></script>
<script type="text/javascript" src="<spring:url value="/_js/swfupload/swfupload.queue.js"/>"></script>
<script type="text/javascript">
    var contextPath = $("#contextPath").val();
    var fileTotal; // 加入队列的文件总数
    var queueErrorArray;
    var swfu;
    var settings = {
        upload_url: "/upload;jsessionid=${pageContext.session.id}",
        flash_url: "<spring:url value="/_js/swfupload/swfupload.swf"/>",

        file_post_name: 'Filedata',
        use_query_string: true,
        post_params: {},

        //file_size_limit:"100 MB",
        file_types:"*.csv;*.txt",
        file_types_description: "All Files",
        //file_size_limit: '102400',
        file_upload_limit: 30,
        file_queue_limit: 60,

        // handlers
        file_dialog_start_handler: fileDialogStart,
        file_queued_handler: fileQueued,
        file_queue_error_handler: fileQueueError,
        file_dialog_complete_handler: fileDialogComplete,
        upload_start_handler: uploadStart,
        upload_progress_handler: uploadProgress,
        upload_success_handler: uploadSuccess,
        upload_error_handler: uploadError,
        upload_complete_handler: uploadComplete,
        queue_complete_handler:uploadQueueComplete,
        button_placeholder_id: 'spanButtonPlaceholder',
        button_image_url: "<spring:url value="/_js/swfupload/XPButtonUploadText.png"/>",
        button_width: "80",
        button_height: "29",
        button_text: '<span class="theFont"></span>',
        button_text_style: ".theFont { font-size: 16; }",
        button_text_left_padding: 12,
        button_text_top_padding: 3,
        button_cursor: SWFUpload.CURSOR.HAND,
        button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
        debug: false,

        custom_settings: {}
    };
    $(function () {
        swfu = new SWFUpload(settings);
    });

    //========================================  回调函数Handlers  ===================================

    /**
     * 打开文件选择对话框时响应
     */
    function fileDialogStart() {
        if (queueErrorArray) {
            queueErrorArray = null;
        }
    }

    /**
     * 文件被加入上传队列时的回调函数,增加文件信息到列表并自动开始上传.<br />
     * <p></p>
     * SWFUpload.startUpload(file_id)方法导致指定文件开始上传,
     * 如果参数为空,则默认上传队列第一个文件;<br />
     * SWFUpload.cancelUpload(file_id,trigger_error_event)取消指定文件上传并从队列删除,
     * 如果file_id为空,则删除队列第一个文件,trigger_error_event表示是否触发uploadError事件.
     * @param file 加入队列的文件
     */
    function fileQueued(file) {
        var swfUpload = swfu;
        var dataType = $('input[name="dataType"]:checked').val();
        if(dataType == undefined)
        {
            swfu.cancelQueue();
            return;
        }

        var listItem = '<li id="' + file.id + '">';
        listItem += '文件:<em>' + file.name + '</em>(' + Math.round(file.size / 1024) + ' KB)';
        listItem += '<span class="progressValue"></span>'
            + '<div class="progressBar"><div class="progress"></div></div>'
            + '<p class="status" >Pending</p>'
            + '<span class="cancel" >&nbsp;</span>'
            + '</li>';
        $("#logList").append(listItem);
        $("li#" + file.id + " .cancel").click(function (e) {
            swfUpload.cancelUpload(file.id, false);
            var stats = swfUpload.getStats();
            swfUpload.setStats({successful_uploads: (stats.successful_uploads - 1)});
            $("#" + file.id).remove();
            $("li#" + file.id).slideUp('fast');
        })

    }

    /**
     * 文件加入上传队列失败时触发,触发原因包括:<br />
     * 文件大小超出限制<br />
     * 文件类型不符合<br />
     * 上传队列数量限制超出等.
     * @param file 当前文件
     * @param errorCode 错误代码(参考SWFUpload.QUEUE_ERROR常量)
     * @param message 错误信息
     */
    function fileQueueError(file, errorCode, message) {
        if (!queueErrorArray) {
            queueErrorArray = [];
        }
        var errorFile = {
            file: file,
            code: errorCode,
            error: ''
        };
        switch (errorCode) {
            case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
                alert(file.name + ': 文件大小超出限制.');
                break;
            case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
                alert(file.name + ': 文件类型受限.');
                break;
            case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
                alert(file.name + ': 文件为空文件.');
                break;
            case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
                alert('超出文件数量限制.');
                break;
            default:
                alert(file.name + ': 加载入队列出错.');
                break;
        }
        queueErrorArray.push(errorFile);
    }

    /**
     * 选择文件对话框关闭时触发,报告所选文件个数、加入上传队列文件数及上传队列文件总数
     * @param numSelected 选择的文件数目
     * @param numQueued 加入队列的文件数目
     * @param numTotalInQueued 上传文件队列中文件总数
     */
    function fileDialogComplete(numSelected, numQueued, numTotalInQueued) {
        $("#divFileCount").slideUp('fast');
        var dataType = $('input[name="dataType"]:checked').val();
        if(dataType == undefined)
        {
            $.messager.alert('提示', '请先选择要导入数据的类型', 'info');
            swfu.cancelQueue();
            return;
        }
        var param = {
            param1:'param 1',
            dataType:dataType
        }
        swfu.setPostParams(param);

        fileTotal = numQueued;
        this.startUpload();
    }

    /**
     * 文件开始上传时触发
     * @param file 开始上传目标文件
     */
    function uploadStart(file) {
        if (file) {
            $("#logList li#" + file.id).find('p.status').text('上传中...');
            $("#logList li#" + file.id).find('p.progressValue').text('0%');
        }
    }

    /**
     * 文件上传过程中定时触发,更新进度显示
     * @param file 上传的文件
     * @param bytesCompleted 已上传大小
     * @param bytesTotal 文件总大小
     */
    function uploadProgress(file, bytesCompleted, bytesTotal) {
        var percentage = Math.round((bytesCompleted / bytesTotal) * 100);
        $("#logList li#" + file.id).find('div.progress').css('width', (percentage - 1) + '%');
        $("#logList li#" + file.id).find('span.progressValue').text((percentage - 1) + '%');
        $("#logList li#" + file.id).find('p.status').text('处理中...');
    }

    /**
     * 文件上传完毕并且服务器返回200状态码时触发
     * @param file 上传的文件
     * @param serverData
     * @param response
     */
    function uploadSuccess(file, response) {
        var tmp = response.split(",");
        var result = tmp[0].split("=");
        var item = $("#logList li#" + file.id);
        if (result[1] == 'success') {
            item.find('div.progress').css('width', '100%');
            item.find('span.progressValue').css('color', 'blue').text('100%');
            item.addClass('success').find('p.status').html('上传完成!');
            closeTabCell(file);
        } else {
            var message = tmp[1].split("=");
            item.find('div.progress').css('width', '0%');
            item.find('span.progressValue').css('color', 'red').text('0%');
            item.addClass('error').find('p.status').css('color', 'red').html('上传失败:' + message[1]);
        }
        $('#importDetailTable').datagrid('load');
    }

    /*
    *关闭上传成功的cell
    * */
    function closeTabCell(file) {
        var swfUpload = swfu;
        var stats = swfUpload.getStats();
        swfUpload.setStats({successful_uploads: (stats.successful_uploads - 1)});
        $("#" + file.id).remove();
        $("li#" + file.id).slideUp(30000);
    }


    /**
     * 上传过程中，出现错误时触发
     * */
    function uploadError(file, errorCode, message) {
        try {
            var item = $("#logList li#" + file.id);
            item.find('div.progress').css('width', '0%');
            item.find('span.progressValue').css('color', 'black').text('0%');
            var status = item.addClass('error').find('p.status');
            status.css('color', 'red');
            switch (errorCode) {
                case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
                    status.html("上传出现错误: " + message + ",请联系开发人员");
                    this.debug("Error Code: HTTP Error, File name: " + file.name + ", Message: " + message);
                    break;
                case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
                    status.html("上传失败.");
                    this.debug("Error Code: Upload Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
                    break;
                case SWFUpload.UPLOAD_ERROR.IO_ERROR:
                    status.html("服务器出现错误");
                    this.debug("Error Code: IO Error, File name: " + file.name + ", Message: " + message);
                    break;
                case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
                    status.html("安全错误");
                    this.debug("Error Code: Security Error, File name: " + file.name + ", Message: " + message);
                    break;
                case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
                    status.html("上传超过上限.");
                    this.debug("Error Code: Upload Limit Exceeded, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
                    break;
                case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
                    status.html("校验失败. 上传将被跳过.");
                    this.debug("Error Code: File Validation Failed, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
                    break;
                case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
                    status.html("已取消");
                    swfu.cancelUpload(file.id)
                    break;
                case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
                    status.html("已停止");
                    break;
                default:
                    status.html("未知错误编码: " + errorCode);
                    this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
                    break;
            }
        } catch (ex) {
            this.debug(ex);
        }
    }

    /**
     * 在一个上传周期结束后触发(uploadError及uploadSuccess均触发)
     * 在此可以开始下一个文件上传(通过上传组件的uploadStart()方法)
     * @param file 上传完成的文件对象
     */

    function uploadComplete(file) {
        this.uploadStart();
    }


    /**
     * 计算已上传文件
     * @param numFilesUploaded
     */
    function uploadQueueComplete(numFilesUploaded) {
        //$("#divFileCount").html(numFilesUploaded + "文件已上传");
        var swfUpload = swfu;
        var stats = swfUpload.getStats();
        //每次上传成功一个文件，就在closeTabCell方法中将successful_uploads-1，所以此处的值是不成功的文件数
        var failTotal = stats.successful_uploads;
        if(fileTotal - failTotal == fileTotal  ){
            $('#dialog').dialog('close');
        }else{
            $("#divFileCount").slideDown('fast');
            if(fileTotal - failTotal < 0){
                $("#divFileCount").html("0个文件上传成功");
            }else{
                $("#divFileCount").html((fileTotal - failTotal)+"个文件上传成功");
            }

        }
    }
/**这个位置是上传窗口，可以替换别的 在框架也中加入
<div id="dialog" class="easyui-dialog" style="width:540px;height:340px;padding:5px 5px"
     data-options="closed:true,buttons:'#dialog-buttons',modal:true">
</div>
*/
    $(function () {
        var options = $('#dialog').dialog('options');
        options.closed = false;
        options.title = '上传文件';
        options.height = 300;
        options.width = 450;
        options.buttons = [];
        options.onClose = function () {
            swfu.destroy();
        }
        $('#dialog').dialog(options);
    });
</script>

css样式

#logList {
	margin: 0;
	padding: 0;
	width: 400px
}
#logList li {
	list-style-position: inside;
	margin: 2px;
	border: 1px solid #ccc;
	padding: 10px;
	color: #333;
	font-size: 15px;
	background: #FFF;
	position: relative;
}
#logList li .progressBar {
	border:1px solid #333;
	height:5px;
	background:#fff;
}  
#logList li .progressValue {
	color: red;
	margin-left: 5px
}  
#logList li .progress {
	background:#999;
	width:0%;
	height:5px;
}  
#logList li p {
	margin:0;
	line-height:18px;
}  
#logList li.success {
	border:1px solid #339933;
	background:#ccf9b9;
}
#logList li span.cancel {
	background:url('../_js/swfupload/delete.gif') no-repeat;
	position:absolute;
	top:5px;
	right:5px;
	width:16px;
	height:16px;
	cursor:pointer
}

样式表中 ('../_js/swfupload/delete.gif') 图片 

('../_js/swfupload/delete.gif')图片

SWFUpload 下载地址：百度网盘

链接: https://pan.baidu.com/s/1l77EjuMBKYuAFY3TAWgm_w

提取码: busj

mjxin123456
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
swfupload 无法加载_flash上传插件——swfupload 【原创】
weixin_39778003的博客
02-22 1447
附件上传功能一般使用实现，但是这个功能是在太弱，无法做到很多实际应用中需要的效果。而flash上传功能就强大很多，可以实现很多我们想要的效果。这里我就推荐一个很好的上传插件——swfupload。swfupload是一个客户端上传工具，整合了javascript与flash技术，他的特点有：可以同时上传多个文件；类似AJAX的无刷新上传；可以显示上传进度；良好的浏览器兼容性；兼容其他JavaScr...
swfupload多文件上传带进度条实例
09-23
**SWFUpload 多文件上传带进度条实例详解** SWFUpload 是一款开源的JavaScript库，专门用于在网页上实现文件的多选上传，并且支持显示上传进度条，为用户提供更好的交互体验。在这个实例中，我们将探讨如何在VS2012...
SWFUpload学习记录
热门推荐
竹叶青的专栏
08-30 1万+
前言         最近项目中要求使用HTTP做文件上传，而且要求有进度显示，在网上东找西寻了半天，解决方案倒也不少，比如使用Ajax上传，但感觉这种方式的进度提示太麻烦，所以没有采用，后来看到了SWFUpload，就找了些资料来看，觉得符合自己的要求，研究了足有两天，略有心得，忙不迭地记录下来，以防止时间长了遗忘，如果不小心帮助了别人，那就更好了，呵呵... 下面摘抄一段SWFUplo
SWFUpload上传文件
weixin_33860147的博客
05-30 144
前言 最近项目中要求使用HTTP做文件上传，而且要求有进度显示，在网上东找西寻了半天， 解决方案倒也不少，比如使用Ajax上传，但感觉这种方式的进度提示太麻烦，所以没有采用， 后来看到了SWFUpload，就找了些资料来看，觉得符合自己的要求，研究了足有两天， 略有心得，忙不迭地记录下来，以防止时间长了遗忘， 下面摘抄一段SWFUpload官网的介绍（别人翻译过来的）： ...
兼容ie8的文件上传插件Web Uploader demo
曉儂
08-06 1065
(注！jquery-2.0以上版本不再支持IE 6/7/8) 并不是最新的版本就最好的，而是根据您项目需求所适合的版本！） jquery-1.7.0 也会有问题，点击上传响应不到，所以在这个推荐用jquery1.11.1版本 jquery 版本获取地址（http://www.jq22.com/jquery-info122或https://jquery.com/） <!DOCTYPE html> <html lang="en"> <head> <meta ch
Swfupload.swf 跨站脚本——漏洞复现
W小哥
12-18 4273
一、swfupload.swf简介 SWFUpload 是一款优秀的 Flash 上传控件，它可以非常好的增强 Web 端程序的用户上传体验。SWFUpload 自由灵活的 JavaScript 接口允许开发者自定义包括 HTML/CSS 在内的几乎所有 UI 样式，被广泛运用在大量站点的上传模块中，如 Youtube 和 WordPress 。 此漏洞可能导致严重的 XSS 安全隐患，但是官方一直没有修复。 二、漏洞复现 payload如下 http://XXX/images/swfupload/swfu
swfupload多文件上传带进度条javaweb项目
07-19
**SwfUpload 多文件上传带进度条 JavaWeb 项目详解** SwfUpload 是一个流行的JavaScript库，它允许用户在浏览器端实现文件的批量上传，同时提供进度条展示上传进度，提高了用户体验。在这个JavaWeb项目中，...
swfupload 异步上传文件，支持进度条上传
10-13
SwfUpload 使用Flash插件作为上传的媒介，因为Flash支持文件分块上传和处理大文件的能力，这使得在浏览器环境中实现文件上传进度跟踪成为可能。JavaScript与Flash之间的通信通过ExternalInterface接口实现，...
swfupload实现带有进度条的文件上传
10-09
在本文中，我们将深入探讨如何利用SwfUpload与jsp、Java Servlet相结合，实现一个带有进度条的文件上传功能。 首先，SwfUpload的工作原理是利用Flash的异步通信能力，它在后台与服务器进行数据交换，用户可以通过...
SwfUpload在IE10上不出现上传按钮的解决方法
09-05
在IE10之前，SwfUpload与Flash技术相结合，提供了一种在浏览器中嵌入Flash对象来处理文件上传的方式。然而，随着浏览器对HTML5的支持增加以及Flash逐渐被淘汰，SwfUpload在某些现代浏览器中，尤其是IE10及更高版本，...
swfupload ie9或者ie10不能加载上传控件兼容性问题
05-04
swfupload 使用时会有ie兼容性问题。将这个js拷贝覆盖则能解决ie9ie10下面不能加载上传组件的兼容性问题。
swfupload.swf.v2.5.0.beta3.2版本
06-23
swfupload flash 多文件上传,这个就是很多在找的最新版本。
swfupload
longyuan20102011的专栏
11-22 2832
jar commons-fileupload-1.2.jar commons-io-1.3.2.jar web.xml 配置文件 <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:
文件上传利器SWFUpload入门简易教程(转)
yinbing2020的专栏
03-18 1118
凡做过网站开发的都应该知道表单file的确鸡肋。 Ajax解决了不刷新页面提交表单，但是却没有解决文件上传不刷新页面，当然也有其它技术让不刷新页面而提交文件，该技术主要是利用隐藏的iFrame，较Ajax要麻烦许多，而且其提交方式依然在底层是使用的表单file，这里我们不详谈。而且如果是提交较小的文件，我们能接受，如果提交的文件较大，我们便要忍受很长的等待时间，而浏览器却没有任何提示，我们也没有
swfupload在ie是正常的其他浏览器没法上传
robin_lvxiongbin的专栏
12-02 417
本人最近接触swfupload上传组件，在IE上传没有问题，在谷歌浏览器上传不了，debug输出下面的问题，哪位高手能帮忙看看 ---SWFUpload Instance Info--- Version: 2.2.0 Alpha Movie Name: SWFUpload_0 Settings: upload_url: http://localhos...
swfupload.js和swfupload.swf
最新发布
12-27
同时，由于现代浏览器对Flash的支持不断减弱，使用swfupload.js和swfupload.swf也需要考虑到兼容性和安全性的问题。为了实现更加现代化和安全的文件上传功能，也可以考虑使用基于HTML5技术的文件上传方案来替代。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值