Web Uploader上传文件
阅读原文时间:2023年07月08日阅读:1

Web Uploader是百度提供的。

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

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

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

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、常见问题及解决方案:

待写