基本信息
源码名称:asp.net 大文件上传 webuploader示例源码(含进度条)
源码大小:27.19M
文件格式:.zip
开发语言:C#
更新时间:2017-09-28
   友情提示:(无需注册或充值,赞助后即可获取资源下载链接)

     嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):78630559

本次赞助数额为: 2 元 
   源码介绍



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/Content/webuploader.css" rel="stylesheet" />
<script src="~/Scripts/webuploader.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <input id="ctlBtn" type="button" value="开始上传" class="btn btn-default" />
    </div>
</div>
</body>
</html>
<script>
    var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
    var GUID = WebUploader.Base.guid();//一个GUID
    $(function () {
        var $ = jQuery;
        var $list = $('#thelist');
        var uploader = WebUploader.create({

            // 选完文件后,是否自动上传。
            auto: false,
            // swf文件路径
            swf: applicationPath   '../Content/Uploader.swf',

            // 文件接收服务端。
            server: applicationPath   'Home/Upload',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建,可能是input元素,也可能是flash.
            pick: '#picker',

            chunked: true,//开始分片上传
            chunkSize: 2048000,//每一片的大小
            formData: {
                guid: GUID //自定义参数,待会儿解释
            },

            // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
            resize: false
        });
        // 当有文件被添加进队列的时候
        uploader.on('fileQueued', function (file) {
            $list.append('<div id="'   file.id   '" class="item">'  
                '<h4 class="info">'   file.name   '</h4>'  
                '<p class="state">等待上传...</p>'  
                '</div>');
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#'   file.id),
                $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">'  
                    '<div class="progress-bar" role="progressbar" style="width: 0%">'  
                    '</div>'  
                    '</div>').appendTo($li).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css('width', percentage * 100   '%');
        });

        // 文件上传成功,给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, response) {
            debugger;
            $('#'   file.id).find('p.state').text('已上传');
            $.post('Home/Merge', { guid: GUID, fileName: file.name }, function (data) {
                $("#uploader .state").html("上传成功...");
            });
        });

        // 文件上传失败,显示上传出错。
        uploader.on('uploadError', function (file) {
            $('#'   file.id).find('p.state').text('上传出错');
        });

        // 完成上传完了,成功或者失败,先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#'   file.id).find('.progress').fadeOut();
        });

        //所有文件上传完毕
        uploader.on("uploadFinished", function () {
            //提交表单

        });
        //开始上传
        $("#ctlBtn").click(function () {
            uploader.upload();

        });

    });
</script>