zoukankan      html  css  js  c++  java
  • angular js 上传插件 ng-file-upload 使用时注意事项

    项目框架为angular js,需要用到文件上传,百度之后先选择了angular-file-upload,githuab上API文档很全,想要具体了解,可以仔细研究一下。在这里简单回顾一下自己使用的插件的部分功能和需要注意的事项。

    1.引入angular-file-upload.js,放在angular js 之后。

    2.将文件注入angular js 的模块中,如 var app =  angular.module (" myapp ", [ ' angularFileUpload ' ]  );

    3.下面就是具体使用了,API文档中 介绍的很详细,支持多种上传样式,如单选,多选,单击选择,拖拽选择等。可以具体研究。我只用到了单选同时也是单击选择。

    <div    ng-app="myapp">

    <div ng-controller="appCtrl">

    <input  type="file" nv-file-select  uploader = "uploader">

    <ul>

    <li  ng-repeat="item in uploader.queue">

        <span>{{item.file.name}}</span>

    </li>

    </ul>

    </div>

    </div>

    其中input file 为上传按钮,它本身的样式比较简单,我这里只需要一个上传按钮,只能用a标签包住input,并将input 设为透明,来实现我想要的按钮样式。

    li标签repeat 出来的就是上传后的文件。queue就是上传后的队列。当然我这里每个文件后还提供删除按钮,这样用他的队列就不太好改,我也尝试过。最终决定自己做个repeat 把上传后的文件名显示在页面上,同时提供删除方法。

    4.js中有许多属性,方法和回调函数。具体可以研究API.

    controller中同样需要注入。例

    myapp.contrller("appCtrl",function(FileUploader){

    var uploader = $scope.uploader = new FileUploader({

    url:""    //上传文件的url

    formData:[Array]   //跟随上传文件同时上传的参数。[{}]参数

    autoUpload:true   //自动上传

    })

    })

    alias 里面的名称需要与后台代码中的一致,默认为file.

    回调函数有成功后,添加后失败后执行的操作,不再一一赘述。

    说了半天,重点来了,插件的兼容性如何,本来加上列出的shim.js等等,以为会兼容,但在IE9上始终上传失败,报错。

    typeErr.最终没办法只好再换一个插件即ng-file-upload.先说一下这个插件的兼容性。

    它是可以兼容到IE9,对于IE9及一下,可以引入shim.js和一段

     <!--[if lte IE 9]> 

     <script>
        FileAPI = {
            jsUrl: 'FileAPI.min.js',
            flashUrl: 'FileAPI.flash.swf',
       
        }
    </script>
    <script src="ng-file-upload-shim.js" type="text/javascript" charset="utf-8"></script>
    <![endif]-->

    注意这段需要放在shim.js 前面,同时 包含FileAPI.min.js和FileAPI.flash.swf这两个文件。

    具体使用和angular-file-upload,相似,就是所用文件和格式不同。详细可以研究API文档,不再赘述。

  • 相关阅读:
    把C语言的指针按在地上摩擦!
    组合索引相关介绍
    ConcurrentModificationException异常
    chat和varchar的区别?
    二进制部署K8S集群(二十三)addons之安装部署dashboard
    二进制部署K8S集群(二十二)addons之安装部署ingress
    二进制部署K8S集群(二十一)addons之flanneld优化SNAT规则
    二进制部署K8S集群(二十)K8s服务暴露之NodePort型Service
    二进制部署K8S集群(十九)addons之安装部署coredns
    二进制部署K8S集群(十八)addons之flannel三种模型安装部署详解
  • 原文地址:https://www.cnblogs.com/yuanyingke/p/7218379.html
Copyright © 2011-2022 走看看