zoukankan      html  css  js  c++  java
  • AngularJS封装webupload实现文件夹上传

    百度的webupload没有开放api获取整个文件夹的信息。本文是二次开发webupload实现获取文件夹信息。 

    指令封装 


    /**

     * @license lx.ui.framework v1.0.0

     * (c) 2017-2018 lx, Inc.n

     * @author lx

     */

    (function(window, undefined ) { 'use strict';

              //设置lx.ui.upload的配置信息

              var $$runtime = {file:'/api/1.0/upload/add', "swf":"",debug : true};

     

              var lxUiUpload=angular.module("lx.ui.upload",[]);

             

    /**

     * 在lx.ui.framework上声明lx-ui-upload指令

     *

     */

    lxUiUpload.directive('lxUiUpload',function($lx){

              var option = {

                        restrict : 'E',

                        replace : true,

                        template : '<div>上传文件</div>',

                        scope:true,

                        link : function($scope, $element, $attrs) {

                        //声明作用域内上传数据对象

              $scope.upload={"id":"","droparea":"","md5":"","length":0,"data":[],"tip":true,"isupload":false,"progress":[],"isprogress":true,"total":0};

                        //设置上传文件id

                        $scope.upload.id="#"+$attrs.id;

                        $scope.upload.droparea="."+$attrs.droparea;

                        WebUploader.Uploader.register({

                                   "before-send-file" : "beforeSendFile"

                        }, {

                                   // 时间点1:所有分块进行上传之前调用此函数

                                   beforeSendFile : function(file) {

                                             var deferred = WebUploader.Deferred();

                                             // 1、使用md5计算文件的唯一标记,用于断点续传

                                             uploader.md5File(file).then(function(val) {

                                                       $scope.upload.md5= val;

                                                       // 2.1.5延迟解决

                                                       deferred.resolve();

                                             });

                                             return deferred.promise();

                                   },

                        });

                        var uploader = WebUploader.create({

                                   // swf文件路径

                                   swf : $$runtime.swf,

                                   // 文件接收服务端。

                                   server : $$runtime.file,

                                   // 选择文件的按钮。可选。

                                   // 内部根据当前运行是创建,可能是input元素,也可能是flash.

                                   pick : {

                                             id : $scope.upload.id,

                                             // 这个id是你要点击上传文件的id,自己设置就好</span>

                                             multiple : true

                                   },

                                   // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!

                                   resize : true,

                                   dnd:$scope.upload.droparea,

                                   auto : true,

                                   // 上传并发数

                                   threads : 5,

                                   // 开启分片上传

                                   chunked : true,

                                   chunkSize : 1 * 1024 * 1024,

                duplicate :true 

                        });

                        // 声明WebUploader内【uploadBeforeSend】事件

                        $scope.$on("isupl",function(event,node){

                                   if(node===1){

                                             $scope.upload.isupload=true;

                                   }else{

                                             $scope.upload.isupload=false;

                                   }

                        });

                        uploader.on("beforeFileQueued", function(file) {

    //                             if(!$scope.upload.isupload){

    //                                       alert("您好:你没得在该文件夹下上传文件的权限!",1);

    //                                       return false;

    //                             }

                        });

                        // 声明WebUploader内【uploadBeforeSend】事件

                        uploader.on("fileQueued", function(file, data) {

                                   if($scope.upload.length==0){

                                             //清空文件进度条

                                             $scope.upload.progress=[];

                                             $scope.upload.total=0;

                                             $lx.show("","/upload/upload/templates/progress.html","lx_progress_ctrl","lg",$scope);

                                   }

                                  $scope.upload.progress.push({id:file.id,size:file.size,name:file.name,type:file.type,percentage:"0"+'%'});

                                   $scope.upload.length++;

                                   // wenbuploader添加携带参数

                        });

                        // 声明WebUploader内【uploadBeforeSend】事件

                        uploader.on("uploadBeforeSend", function(block, data) {

                                   // wenbuploader添加携带参数

                                   data.fileMd5 = $scope.upload.md5;

                        });

                        // 声明WebUploader内【uploadProgress】事件

                        uploader.on( 'uploadProgress', function(file, percentage ) {

                                   angular.forEach($scope.upload.progress,function(v){

                                             if(v.id==file.id){

                                                       v.percentage=Math.round(percentage * 100) + '%';

                                             }

                                   });

                            $scope.$apply();

                        });

                        // 声明WebUploader内【拼装文件地址】事件,实现获取文件夹和文件的逻辑

                        function assemblepath(folders,files){

                                  //循环folders

                                   //console.log(angular.toJson(folders.folders));

                                   angular.forEach(folders.folders,function(v){

                                             angular.forEach(v.files,function(f){

                                                       //循环上传的文件

                                                       angular.forEach(files,function(i,index){

                                                                 if(f.name==i.name){

                                                                           f.md5==undefined?"0":f.md5;

                                                                           f.size==undefined?"0":f.size;

                                                                           f.type==undefined?"999":f.type;

                                                                           f.md5=i.md5;

                                                                           f.size=i.size;

                                                                           f.type=i.type;

                                                                           files.splice(index,1);

                                                                 }

                                                                

                                                       });

                                             });

                                             assemblepath(v,files);

                                   });

                        }

                        // 声明WebUploader内【uploadSuccess】事件

                        uploader.on("uploadSuccess", function(file, response) {

                                  

                                   $scope.upload.total++;

                                   $scope.upload.data.push(response[0]);

                                   $scope.upload.length--;

                                   if($scope.upload.length==0){

                                             var isdrop=false;

                                             //判断拖拽还是选择文件上传

                                             var file={};

                                             try{

                                                       file=angular.fromJson(localStorage.getItem("file"));

    //获取到的文件夹和文件信息

                                                       alert(angular.toJson(file))

                                                       if(file==""||file==null){

                                                                 file={};

                                                                 isdrop=false;

                                                       }else{

                                                                 isdrop=true;

                                                       };

                                             }catch(e){

                                            

                                             }

                                             //如果是拖拽

                                             if(isdrop){

                                                       try{

                                                                 angular.forEach(file.files,function(f){

                                                                           angular.forEach($scope.upload.data,function(i,index){

                                                                                      if(f.name==i.name){

                                                                                                debugger;

                                                                                                f.md5==undefined?"0":f.md5;

                                                                                                f.size==undefined?"0":f.size;

                                                                                                f.type==undefined?"999":f.type;

                                                                                                f.md5=i.md5;

                                                                                                f.size=i.size;

                                                                                                f.type=i.type;

                                                                                                $scope.upload.data.splice(index,1);

                                                                                      }

                                                                           });

                                                                 });

                                                                 assemblepath(file, $scope.upload.data);

                                                       }catch(e){

                                                                

                                                       }

                                             }else{

                                                       file.files=[];

                                                       file.files=$scope.upload.data;

                                             }

                                             $scope.$emit('upload', file); 

                                             $scope.upload.data=[];                                                

                                             $util.set("file","");

                                             file={};

                                             isdrop=false;

                                                       }

                                             });

                                   }

                        };

                       

                        return option;

              });

    })();



    使用: 

    <lx-ui-upload droparea="lx-ui-panel" id="upload" type="button" class="lx-ui-button orange r" value="上传文件" style="80px;"></lx-ui-upload>




    效果: 

     

    DEMO下载地址:https://dwz.cn/fgXtRtnu

  • 相关阅读:
    继承
    包、logging模块、hashlib模块、openpyxl模块、深浅拷贝
    Java中的Lambda表达式
    Java中udp/tcp的发送和接收
    Java中的IO流总结
    Java中的多线程
    Java中使用try-catch-finally处理IO流中的异常
    Java中的杂流(闸总)
    Java中的Properties
    Java中IO流之字符流
  • 原文地址:https://www.cnblogs.com/xproer/p/10789282.html
Copyright © 2011-2022 走看看