44大文件(分片)上传=前端部分

时间 2019-11-30
标签文件分片上传前端部分繁體版
原文原文链接
1、百度文档```html<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" type="text/css" href="./webuploader.css">    <script type="text/javascript" src="./jquery.js"></script>    <script type="text/javascript" src="./webuploader.js"></script></head><body><div id="uploader" class="wu-example">    <!--用来存放文件信息-->    <div id="thelist" class="uploader-list"></div>    <div class="btns">        <div id="picker">选择文件</div>       <!--<button id="ctlBtn" class="btn btn-default">开始上传</button>-->    </div></div></body></html><script type="text/javascript">    jQuery(function() {        var $ = jQuery;        var $list = $('#thelist');        /*var $btn = $('#ctlBtn');*/        var state = 'pending';        var uploader;        uploader = WebUploader.create({            // swf文件路径            swf: './Uploader.swf',            // 文件接收服务端。            server: 'http://webuploader.duapp.com/server/fileupload.php',            // 选择文件的按钮。可选。            // 内部根据当前运行是建立，多是input元素，也多是flash.            pick: '#picker',//上传按钮的id            //是否要分片处理大文件上传。            chunked:true,            //若是要分片，分多大一片？ 默认大小为5M.            chunkSize :1024*1024*20,            // 不压缩image, 默认若是是jpeg，文件上传前会压缩一把再上传！            resize: false        });        // 当有文件被添加进队列的时候        uploader.on( 'fileQueued', function( file ) {            console.log(file.id);            console.log(file.name);            $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 $div = $( '#'+file.id );            var $percent = $div.find('.progress .progress-bar');            // 避免重复建立            if ( !$percent.length ) {                $percent = $div.append('<div class="progress progress-striped active">' +                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +                        '</div>' +                        '</div>').find('.progress-bar');            }            $div.find('p.state').text('上传中');            $percent.css( 'width', percentage * 100 + '%' );        });        uploader.on( 'uploadSuccess', function( file ) {            $( '#'+file.id ).find('p.state').text('已上传');        });        uploader.on( 'uploadError', function( file ) {            $( '#'+file.id ).find('p.state').text('上传出错');        });        uploader.on( 'uploadComplete', function( file ) {            $( '#'+file.id ).find('.progress').fadeOut();        });    });</script>```来源：http://fex.baidu.com/webuploader/getting-started.html2、JQuery版实例```html<!DOCTYPE html><html lang="en"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>设备升级</title>    <link href="../static/css/webuploader.css" rel="stylesheet" type="text/css"/>    <script type="text/javascript" src="../static/js/jquery.min.js"></script>    <script type="text/javascript" src="../static/js/webuploader.js"></script></head><body><div class="place">    <span>位置：</span>    <ul class="placeul">        <li><a href="#">首页</a></li>        <li><a href="#">系统-设备信息</a></li>    </ul></div><div class="deviceInformation">    <ul class="detail">        <li class="item">名称：<span id="name">工业监测审计系统</span></li>        <li class="item">型号：<span id="type">INA-200</span></li>        <li class="item">硬件版本：<span id="hardwareVersion">INA-200-V1802005C</span></li>        <li class="item">软件版本：<span id="softwareVersion">V2.0</span></li>        <li>            <div id="picker">请选择</div>   <!-- 上传按钮，必须指定id选择器的值 -->            <div class="progress">         <!-- 进度条 -->                <div class="progress-bar progress-bar-striped active" role="progressbar" style="width:0%;"></div>            </div>        </li>        <li class="item">序列号：<span id="serialNumber">CY18-NA2B-A018-5081</span></li>        <li class="item">制造商：<span id="manufacturer"> 科技（北京）有限公司</span></li>        <li class="item">出厂日期：<span id="productionDate">2018年2月10日</span></li>    </ul></div></body></html><script type="text/javascript">    $(document).ready(function() {        $.ajax({            type: 'get',            data: "system_deviceInformation",            url: "/system/devinfo/getinfo",            success: function (data) {                $("#name").html(data.name);                $("#type").html(data.type);                $("#hardwareVersion").html(data.hardwareVersion);                $("#softwareVersion").html(data.softwareVersion);                $("#serialNumber").html(data.serialNumber);                $("#manufacturer").html(data.manufacturer);                $("#productionDate").html(data.productionDate);            }        });        var task_id = WebUploader.Base.guid();        //生成惟一的ID        var uploader = WebUploader.create({           //建立上传控件            swf: '../static/js/Uploader.swf', //swf位置，这个可能与flash有关            server: '/upload/accept',                 //接收每个分片的服务器地址            pick: '#picker',                          //上传按钮的id            auto: true,                               //选择文件后，是否自动上传            chunked: true,                            //是否分片            chunkSize: 20 * 1024 * 1024,              //每一个分片的大小，这里为20M            chunkRetry: 3,                            //某分片若上传失败，重试次数            threads: 1,                               //线程数量，考虑到服务器，这里就选了1            duplicate: true,                          //分片是否自动去重            formData: {                               //每次上传分片，一块儿携带的数据                task_id: task_id,            },        });        uploader.on('startUpload', function() {       //开始上传时，调用该方法            $('.progress-bar').css('width', '0%');            $('.progress-bar').text('0%');        });        uploader.on('uploadProgress', function(file, percentage) { //一个分片上传成功后，调用该方法            $('.progress-bar').css('width', percentage * 100 - 1 + '%');            $('.progress-bar').text(Math.floor(percentage * 100 - 1) + '%');        });        uploader.on('uploadSuccess', function(file) { //整个文件的全部分片都上传成功，调用该方法            //上传的信息（文件惟一标识符，文件名）            var data = {'task_id': task_id, 'filename': file.source['name'] };            $.get('/upload/complete', data);          //ajax携带data向该url发请求            $('.progress-bar').css('width', '100%');            $('.progress-bar').text('上传完成');        });        uploader.on('uploadError', function(file) {   //上传过程当中发生异常，调用该方法            $('.progress-bar').css('width', '100%');            $('.progress-bar').text('上传失败');        });        uploader.on('uploadComplete', function(file) {//上传结束，不管文件最终是否上传成功，该方法都会被调用            $('.progress-bar').removeClass('active progress-bar-striped');        });    });</script>```来源：https://blog.csdn.net/jinixin/article/details/775451403、angular版实例1（初始化阶段执行下面代码）```javascriptif ($scope.file_.uploader) return;var task_id = WebUploader.Base.guid(); //生成惟一的ID$scope.file_.uploader = WebUploader.create({ //建立上传控件    server: './system/devinfo/upload', //接收每个分片的服务器地址    pick: '#device-updata-button', //上传按钮的id    auto: true, //选择文件后，是否自动上传    chunked: true, //是否分片    chunkSize: 20 * 1024 * 1024, //每一个分片的大小，这里为20M    chunkRetry: 3, //某分片若上传失败，重试次数    threads: 1, //线程数量，考虑到服务器，这里就选了1    duplicate: true, //分片是否自动去重    formData: { //每次上传分片，一块儿携带的数据        task_id: task_id,    },});$scope.file_.uploader.on('startUpload', function () { //开始上传时，调用该方法    dir_alert.set({        title: '文件上传中...',        click_other_hidden: false,        icon_close: false,        esc_close: false,        theme: {            width: '380px'        },        tpl: '<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">0%</div></div>' +        '<div style="display: flex;' +        'justify-content: flex-start;' +        'align-items: center;' +        'flex-direction: column;">' +        '<p class="text-center" style="margin:10px 0;">已经加载文件<span class="progress-ed"></span>....</p>' +        '<img src="../../static/img/icon-updata.png" style="margin:30px 0;" width="37px" height="40px">' +        '<button type="button" ng-click="cancel()"  ng-bind="button_txt"  class="btn btn-default" style="color:#d9534f;border:1px solid #d9534f;background:#fff;"></button></div>',        tpl_scope: {            button_txt: '取消上传',            cancel: function () {                $scope.file_.uploader.stop(true);                dir_alert.show(false);            }        },    })});$scope.file_.uploader.on('uploadProgress', function (file, percentage) { //一个分片上传成功后，调用该方法    $('.progress-bar').css('width', percentage * 100 - 1 + '%');    $('.progress-bar').text(Math.floor(percentage * 100 - 1) + '%');    $('.progress-ed').text(Math.floor(percentage * 100 - 1) + '%');});$scope.file_.uploader.on('uploadSuccess', function (file) { //整个文件的全部分片都上传成功，调用该方法 上传的信息（文件惟一标识符，文件名）    var data = {        'task_id': task_id,        'filename': file.source['name']    };    $.get('./system/devinfo/complete', data); //ajax携带data向该url发请求    $('.progress-bar').css('width', '100%');    $('.progress-ed').text('100%');    $('.progress-bar').text('上传完成');    $timeout(function () {        dir_alert.show(false);        dir_alert.set({            title: '设备升级中...',            click_other_hidden: false,            icon_close: false,            esc_close: false,            theme: {                width: '380px'            },            tpl: '<div  ng-init="init()" style="display: flex;' +            'justify-content: flex-start;' +            'align-items: center;' +            'flex-direction: column;">' +            '<img src="../../static/img/wait82_82px.png" class="updata-circle" style="margin:30px 0;" width="50px" height="50px">' +            '<p class="text-center" style="margin:10px 0;">设备升级中，大约须要时间<span style="color:red" ng-bind="time_s">15:00</span>，请耐心等待。</p></div>',            tpl_scope: {                timeval: null,                time_s: '15:00',                time: 15 * 60,                init: function () {                    var that = this;                    that.timeval = $interval(function () {                        that.time = that.time - 1;                        if (that.time === 0) {                            that.timeval ? $interval.cancel(that.timeval) : angular.noop();                            account_m.exit();                            dir_alert.show(false);                            $timeout(function () {                                dir_alert.set({                                    button: true,                                    cancel_hiden: true,                                    title: '升级结果',                                    tpl: '升级成功！请从新登陆。'                                });                            }, 1500)                            return;                        }                        var h = parseInt(that.time / 60);                        var min = that.time % 60;                        that.time_s = (h < 10 ? '0' + h : h) + ':' + (min < 10 ? '0' + min : min);                    }, 1000);                }            },        })    }, 2000)});$scope.file_.uploader.on('uploadError', function (file) {    $('.progress-bar').css('width', '100%');    $('.progress-bar').text('上传失败');});```4、angular版实例2（初始化阶段执行下面代码）```html<div class="common-card-style">    <form enctype="multipart/form-data" method="post" id="protocol-private-file-upload-form">      <div class="form-inline protocol-private-row">        <div class="form-group">          <label>            <span>*</span>            <span>协议名称</span>          </label>          <input type="text" class="form-control" name="name" ng-model="protocol_form.name"            id="protocol-private-protocol-name" style="padding-left: 50px;width:400px;" maxlength="40">          <span class="pre-protocol-string">UDF-</span>        </div>      </div>      <div class="form-inline protocol-private-row">        <div class="form-group">          <label>            <span>*</span>            <span>协议脚本</span>          </label>          <button type="button" class="btn btn-outline-primary protocol-private-upload-button">            选择文件            <input type="file" name="rule" onchange="angular.element(this).scope().fileChanged1(this)">          </button>          <span            ng-class="{'text-primary':files_list1[0].name,'text-danger':!files_list1[0].name}">{{files_list1[0].name||'请选择 .lua格式文件'}}</span>        </div>      </div>      <div class="form-inline protocol-private-row">        <div class="form-group ">          <label>            <span>*</span>            <span>协议描述</span>          </label>          <button type="button" class="btn btn-outline-primary protocol-private-upload-button">            选择文件            <input type="file" name="segment" onchange="angular.element(this).scope().fileChanged2(this)">          </button>          <span            ng-class="{'text-primary':files_list2[0].name,'text-danger':!files_list2[0].name}">{{files_list2[0].name||'请选择 .proto格式文件'}}</span>        </div>      </div>      <div class="form-inline protocol-private-row">        <div class="form-group">          <label></label>          <button type="submit" ng-click="start_upload()" style="width: 250px" class="btn btn-primary"            ng-disabled="!files_list1[0].name||!files_list2[0].name||!protocol_form.name">导入</button>        </div>      </div>    </form>  </div>``````javascript$scope.fileChanged1 = function (ele) {        $scope.files_list1 = ele.files;        $scope.$apply();      };      $scope.fileChanged2 = function (ele) {        $scope.files_list2 = ele.files;        $scope.$apply();      };      $scope.start_upload = function () {        var formdata = new FormData(document.getElementById('protocol-private-file-upload-form'));        var protocol_name = $('#protocol-private-protocol-name').val();        formdata.set('name', ('UDF-' + protocol_name));        $.ajax({          url: '/protocol/selfdefine/upload',          type: 'post',          data: formdata,          processData: false,          contentType: false,          success: function (res) {            if (res.status === 1) {              $scope.g_tip('上传成功！');              $scope.pagin_init.reload();              $scope.files_list1 = '';              $scope.files_list2 = '';              $scope.protocol_form.name = '';              angular.element('input[type = file]')[0].value = '';              angular.element('input[type = file]')[1].value = '';            } else if (res.status === 0) {              $scope.g_alert(res.msg);            } else if (res.status === 1000) {              dir_alert.set({                button: true,                cancel_hiden: true,                click_other_hidden: false,                icon_close: false,                title: '错误',                content: '当前会话已过时，即将跳到登陆页。',              });              account_m.exit();            } else {              $scope.g_alert('上传失败！');            }          },          error: function () {            $scope.g_alert('通讯失败！');          }        });      };```5、在angular项目中，怎样将元素自己传入到元素的事件中```html<input type="file" name="rule" onchange="angular.element(this).scope().fileChanged1(this)">```使用ng-change指令，致使输入一个文本就会查询一次，频繁的调接口，对服务器形成没必要要的压力。使用ng-change指令，可是添加延时，延时执行调接口，这里延时多少才合适是个问题。换成原生change事件，用户输入结束后，input失焦，才调接口。一、问题描述：（1）在angular项目中，为何不这样：<input type="file" name="segment" ng-change="angular.element(this).scope().fileChanged2(this)">（2）在angular项目中，为何不这样：<input type="file" name="segment" ng-change="fileChanged2(this)">（3）在angular项目中，调用原生事件：<input type="file" name="segment" onchange="angular.element(this).scope().fileChanged2(this)">二、问题释疑：（1）既然用ng-change，应该直接调用"fileChanged2(this)"方法，不该该用"angular.element(this).scope()."来寻找方法。（2）既然用ng-change，若是直接调用"fileChanged2(this)"方法，this会被认为是鼠标事件对象，而不是input元素。（3）使用onchange原生事件，使用JS语句angular.element(this).scope().fileChanged2(this)将input元素即this传入。6、bootstrap进度条动态使用方法（两层div标签）一、外层 class="progress" style="width:300px" ng-show="true"，规定展现区样式、宽度、是否显示。一、内层 class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuenow="60" aria-valuemax="100" ng-style="{width: XXX}"，规定展现区样式、角色、最小展值、默认展现值、最大展现值、当前展现值，其中最大值和最小值供当前值计算占比。```html<div class="progress" style="width:300px" ng-show="init_study.state==='1'">    <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuenow="60" aria-valuemax="100"         ng-style="{width: init_study.progress}">        {{init_study.progress}}<!--进度条上展现的文字内容-->    </div></div>```7、HTML5 Blob 实现文件下载功能一、建立a元素 var a = document.createElement('a');二、建立当前文件的内存URL a.href = URL.createObjectURL(blob);/*为下载文件建立本地url，后台返回result，应当下载的那部分即blob=result.data*/三、下载当前文件 a.download = un_code.utf8Decode(data.headers('filename'));/*为下载文件建立本地文件名，data.headers('filename')获取服务器端文件名，un_code.utf8Decode是自定义方法，用于把其它编码的文件转换成utf-8编码，*/四、自动点击 a.click();五、移除元素 $(a).remove();