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

其他 2019-06-03 13:34:45 阅读次数: 0 
一、百度文档
```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.html

二、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/77545140

三、angular版实例1（初始化阶段执行下面代码）
```javascript
if ($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('上传失败');
});

```
四、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('通信失败！');
          }
        });
      };
```
五、在angular项目中，怎样将元素本身传入到元素的事件中
```html
<input type="file" name="rule" onchange="angular.element(this).scope().fileChanged1(this)">
```
使用ng-change指令，导致输入一个文本就会查询一次，频繁的调接口，对服务器造成不必要的压力。
使用ng-change指令，但是添加延时，延时执行调接口，这里延时多少才合适是个问题。
换成原生change事件，用户输入结束后，input失焦，才调接口。
1、问题描述：
（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)">
2、问题释疑：
（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传入。

六、bootstrap进度条动态使用方法（两层div标签）
1、外层 class="progress" style="width:300px" ng-show="true"，规定展示区样式、宽度、是否显示。
1、内层 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>
```
七、HTML5 Blob 实现文件下载功能
1、创建a元素 var a = document.createElement('a');
2、创建当前文件的内存URL a.href = URL.createObjectURL(blob);/*为下载文件创建本地url，后台返回result，应当下载的那部分即blob=result.data*/
3、下载当前文件 a.download = un_code.utf8Decode(data.headers('filename'));/*为下载文件创建本地文件名，data.headers('filename')获取服务器端文件名，un_code.utf8Decode是自定义方法，用于把其它编码的文件转换成utf-8编码，*/
4、自动点击 a.click();
5、移除元素 $(a).remove();





猜你喜欢

转载自www.cnblogs.com/gushixianqiancheng/p/10966929.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022