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

    待写

     

  • 相关阅读:
    神经网络与数字货币量化交易系列(1)——LSTM预测比特币价格
    FMZ发明者量化平台回测机制说明
    使用JavaScript实现量化策略并发执行
    数字货币期货与现货JavaScript量化策略代码详解汇总
    极简比特币高频策略机器人
    爬虫爬取币安公告自动出售将要下架币策略
    Deribit交易所 websocket API 连接范例
    极简版OKEX比特币跨期对冲策略
    OKEX websocket API 连接Python范例
    Vmare安装Linux 虚拟机流程
  • 原文地址:https://www.cnblogs.com/zxdz/p/13722703.html
Copyright © 2020-2023  润新知