Web Uploader上传文件

Web Uploader是百度提供的。

1:下载:http://fex.baidu.com/webuploader/(官方下载/示例)

2:使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。

///src值根据文件在项目中的位置而定

<link href="~/Content/webuploader/webuploader.css" rel="stylesheet" />

<script src="~/Content/webuploader/webuploader.js"></script>

<!--SWF在初始化的时候指定，在后面将展示-->

3、html部分：

    <div id="uploadWindow" class="container-fluid">
        <div class="windowTop" style="border-bottom:1px solid #808080;">
            <div id="filePicker" style="width:50%;float:left;padding:5px 3px;">
                选择文件
            </div>
            <button id="ctlBtn" class="button-upload">开始上传</button>
            <button id="closeUploadWindow" class="button-upload cl">关闭</button>
        </div>
        <div class="windowCenter">文件上传示例：</div>
        <div class="windowBottom">
            <div id="selectedFiles" class="wu-example">
                <!--用来存放文件信息-->
                <div id="fileList" class="uploader-list"></div>
            </div>
        </div>
    </div>

　4、js部分

var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
　　

// 上传初始化
function initUpload() {
    //文件上传
    var $ = jQuery,
        $list = $('#fileList'),
        $btn = $('#ctlBtn'),
        state = 'pending',
        uploader;
    uploader = WebUploader.create({
        auto: false,// 选完文件后，是否自动上传。
        // 不压缩image
        resize: false,
        // swf文件路径 
        swf: applicationPath + '~/Content/webuploader/Uploader.swf', 
        // 文件接收服务端。
        server: '/Home/UploadFiles',
    
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',
        //accept: {
        //    title: "RFA",
        //    extensions: "rfa",
        //    mimeTypes: ".rfa,application/octet-stream",
        //},
        chunked: true,// 开起分片上传。
        threads: 1, // 上传并发数。允许同时最大上传进程数。
        method: 'POST', // 文件上传方式，POST或者GET。
        //fileSizeLimit: 1024 * 1024 * 100 * 100, //验证文件总大小是否超出限制, 超出则不允许加入队列。
        //fileSingleSizeLimit: 1024 * 1024 * 100, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
        //fileVal: 'upload', // [默认值：'file'] 设置文件上传域的name。
    });


    // 当有文件添加进来的时候
    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 + '%');
    });

    uploader.on('uploadSuccess', function (file, response) {
        $('#' + file.id).find('p.state').text(response.info);
       // fileurl = response.data; //上传文件的路径
      // 
    });

    uploader.on('uploadError', function (file, response) {
        debugger
        $('#' + file.id).find('p.state').text('上传出错 ' + response);
    });

    uploader.on('uploadComplete', function (file, response) {
        $('#' + file.id).find('.progress').fadeOut();
      
    });
    //当所有文件上传完成时触发
    uploader.on('uploadFinished', function () {
     这里是一个异步回调函数，对文件的一个处理。后台通过单独开一个线程进行处理。详情看多线程分类里相关文档里
       // webuploaderCallBack();
    });

    uploader.on('all', function (type) {
        if (type === 'startUpload') {
            state = 'uploading';
        } else if (type === 'stopUpload') {
            state = 'paused';
        } else if (type === 'uploadFinished') {
            state = 'done';
        }

        if (state === 'uploading') {
            $btn.text('上传中...');
        } else {
            $btn.text('开始上传');
        }
    });

    $btn.on('click', function () {
        var type="010";
        var onelevel = $("#onelevel option:selected").attr("id");
        var twolevel = $("#twolevel option:selected").attr("id");
        var threelevel = $("#threelevel option:selected").attr("id");
        
        if (threelevel != undefined) {
            type = threelevel;
        }
        else {
            if (twolevel != undefined) {
                type = twolevel;
            } else {
                if (onelevel != undefined) {
                    type = onelevel;
                }
            }
        }

        // 初始化以后添加
        uploader.options.formData.filetype = type;

        if (state === 'uploading') {
            uploader.stop();
        } else {
            uploader.upload();
        }
    });
    ///取消上传
    $('.uploader-list').on('click', '.btn-remove', function () {
        debugger
        // 从文件队列中删除某个文件id
        file_id = $(this).data('id');
        uploader.removeFile(file_id, true); // 从队列中删除
        //console.log(uploader.getFiles()) // 队列显示还在  其实已经删除
    });
    //重试上传，重试指定文件，或者从出错的文件开始重新上传。
    $('.uploader-list').on('click', '.upload-item__progress span', function () {
        debugger
        uploader.retry($(this).data('file'));
    });
};

　　

　　5、常见问题及解决方案：

待写