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

    待写

     

  • 相关阅读:
    【译】常用网络端口号列表
    使用Simian进行重复代码检测
    使用GCOV进行代码覆盖率统计
    AFL Fuzz安装及完成一次简单的模糊测试
    数据可视化概述
    完成下方的 which_date() 函数,并返回某一起始时间后特定一段时间的日期
    linux用户不在sudoers文件中
    linux /lib64/libc.so.6: version `GLIBC_2.17′ not found
    web api 2.0 上传文件超过4M时,出现404错误
    Centos7 编译安装 Nginx Mariadb Asp.net Core2 (实测 笔记 Centos 7.7 + Openssl 1.1.1d + Mariadb 10.3.7 + Nginx 1.16.1 + Asp.net. Core 2 )
  • 原文地址:https://www.cnblogs.com/zxdz/p/13722703.html
Copyright © 2020-2023  润新知