帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:Html输入  input-file  文件  MAT  angular  文件上传  Material  输入  
A Html file input enhance base on angular material.

  • 源代码名称:angular-material-fileinput
  • 源代码网址:http://www.github.com/shuyu/angular-material-fileinput
  • angular-material-fileinput源代码文档
  • angular-material-fileinput源代码下载
  • Git URL:
    git://www.github.com/shuyu/angular-material-fileinput.git
  • Git Clone代码到本地:
    git clone http://www.github.com/shuyu/angular-material-fileinput
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/shuyu/angular-material-fileinput
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • Angular 材质文件输入

    基于 Angular 材料的Html文件输入增强。

    这里指令尝试使输入文件或者文件上传直观。

    screensho 0

    screensho 1

    演示

    现场演示插件

    正在启动

    使用 Bower 安装,或者直接从 repo 中的dist文件夹下载文件。

    bower install lf-ng-md-file-input --save

    dist/lf-ng-md-file-input.jsdist/lf-ng-md-file-input.css 添加到 index.html.

    <!-- Angular Material Dependencies --><linkrel="stylesheet"href="./bower_components/angular-material/angular-material.min.css">
    <scriptsrc="./bower_components/angular/angular.min.js"></script>
    <scriptsrc="./bower_components/angular-animate/angular-animate.min.js"></script>
    <scriptsrc="./bower_components/angular-aria/angular-aria.min.js"></script>
    <scriptsrc="./bower_components/angular-material/angular-material.min.js"></script><!-- Angular Material Fileinput --><linkrel="stylesheet"href="./bower_components/lf-ng-md-file-input/dist/lf-ng-md-file-input.css">
    <scriptsrc="./bower_components/lf-ng-md-file-input/dist/lf-ng-md-file-input.js"></script>

    lfNgMdFileInput 作为模块的MODULE 依赖项添加。

    var app =angular.module('app', ['ngMaterial','lfNgMdFileInput']);

    用法

    这个 Angular 指令专注于使材料的外观和上传文件基于 ajax。

    所以最重要的是你需要自己从"lf文件"数据绑定中提取文件,而不是输入元素,因为它会在解析文件之后清除。

    "lf文件"数据是 array 变量,array 中包含具有 lfFileName ( 文件名) 、lfFile ( 文件对象) 和 lfDataUrl ( 预览)的属性,来自解析输入文件。

    你可以使用 $watch. 来观察"lf文件"

    html
     <lf-ng-md-file-inputlf-files='files'multiple> </lf-ng-md-file-input>
    javascript
    app.controller('MyCtrl',function($scope){
     $scope.$watch('files.length',function(newVal,oldVal){
     console.log($scope.files);
     });
     });

    完成选择文件后,需要调整 below 之类的数据以适应服务器端。

    客户端
    app.controller('MyCtrl',function($scope){
     ...$scope.onSubmit=function(){
     var formData =newFormData();
     angular.forEach($scope.files,function(obj){
     if(!obj.isRemote){
     formData.append('files[]', obj.lfFile);
     }
     });
     $http.post('./upload', formData, {
     transformRequest:angular.identity,
     headers: {'Content-Type':undefined}
     }).then(function(result){
     // do sometingh  },function(err){
     // do sometingh });
     };
     ... });

    在本例中,我在服务器端使用 node.js( express + formidable ) & ( express + Multer ),"强大的& Multer"是解析表单数据的node MODULE。

    服务器强大
    var express =require('express');
     var formidable =require('formidable');
     var app =express();
     app.use(express.static(__dirname+'/public'));
     ...app.post('/upload',function(req,res){
     var form =newformidable.IncomingForm();
     form.uploadDir=__dirname+'/public/uploads';
     //file upload pathform.parse(req, function(err, fields, files) {
     //you can get fields here });
     form.on ('fileBegin', function(name, file){
     file.path=form.uploadDir+"/"+file.name;
     //modify file path });
     form.on ('end', function(){
     res.sendStatus(200);
     //when finish all process  });
     });
     ...
    Muliter
    var express =require('express');
     var multer =require('multer');
     var app =express();
     app.use(express.static(__dirname+'/public'));
     ...var storage =multer.diskStorage({
     destination:function (req, file, cb) {
     cb(null, __dirname+'/public/uploads');
     //modify upload dest },
     filename:function (req, file, cb) {
     cb(null, file.originalname);
     //modify file name }
     });
     var upload =multer({ "storage": storage });
     var type =upload.array('files[]');
     app.post('/upload',type,function(req,res){
     res.sendStatus(200);
     });
     ...

    基本

    <lf-ng-md-file-inputlf-files="files"ng-change="onFilesChange()"></lf-ng-md-file-input>

    提交按钮

    <lf-ng-md-file-inputlf-files="files"submitlf-on-submit-click="onSubmitClick"></lf-ng-md-file-input>

    aria标签

    <lf-ng-md-file-inputlf-files="files"aria-label="fileupload"></lf-ng-md-file-input>

    接受

    接受属性只支持MIME类型( 比如: 图像/*,图像/jpeg,视频/*,视频/mp4

    <lf-ng-md-file-inputlf-files="files"accept="image/*"></lf-ng-md-file-input>

    <lf-ng-md-file-inputlf-files="files"multiple></lf-ng-md-file-input>

    进程

    <lf-ng-md-file-inputlf-files="files"progress></lf-ng-md-file-input>

    占位符

    <lf-ng-md-file-inputlf-files="files"lf-placeholder="my placeholder"></lf-ng-md-file-input>

    标题

    <lf-ng-md-file-inputlf-files="files"lf-caption="my caption"></lf-ng-md-file-input>

    预览

    <lf-ng-md-file-inputlf-files="files"preview></lf-ng-md-file-input>

    拖动

    <lf-ng-md-file-inputlf-files="files"drag></lf-ng-md-file-input>

    更改标签

    <lf-ng-md-file-inputlf-files="files"lf-drag-and-drop-label="Drag and Drop this"drag></lf-ng-md-file-input>
    <lf-ng-md-file-inputlf-files="files"lf-browse-label="Browse..."></lf-ng-md-file-input>
    <lf-ng-md-file-inputlf-files="files"lf-remove-label="Trash"></lf-ng-md-file-input>

    复位内部 lfFiles

    <lf-ng-md-file-inputlf-files="files"draglf-api="lfApi"></lf-ng-md-file-input>

    相应的javascript控制器

    /** * Upload using your own API*/upload().then(function(response)
     {
     /** * Do stuff *.. .*//** * Reset the contents of file input*/$scope.lfApi.removeAll();
     });

    验证

    属性说明
    必要需要文件输入
    lf-maxcount文件计数限制
    lf大小每个文件大小限制
    lf-totalsize文件总大小限制
    lf-mime类型mime类型检查

    如果大小和 lf-totalsize必须需要单位数。 ( 比如: 5字节,100 KB,5 MB )

    <formname="testForm"layout="column">
     <lf-ng-md-file-inputname="files"lf-files="files"lf-requiredlf-maxcount="5"lf-filesize="10MB"lf-totalsize="20MB"lf-mimetype="image/*"multipledragpreview></lf-ng-md-file-input>
     <divng-messages="testForm.files.$error"style="color:red;">
     <divng-message="required">This is required.</div>
     <divng-message="maxcount">Too many files.</div>
     <divng-message="filesize">File size too large.</div>
     <divng-message="totalsize">Total size too large.</div>
     <divng-message="mimetype">Mimetype error.</div>
     </div>
    </form>

    函数绑定

    名称参数说明
    lf-on-file-click文件,索引单击特定文件时
    lf-on-file-remove文件,索引删除所有文件
    lf-on-submit-click文件当提交按钮单击时
    <lf-ng-md-file-inputlf-files="files"lf-on-file-click="onFileClick"lf-on-file-remove="onFileRemove"lf-on-submit-click="onSubmitClick"submit></lf-ng-md-file-input>
    <script>...$scope.onFileClick=function(obj,idx){
     console.log(obj);
     };
     $scope.onFileRemove=function(obj,idx){
     console.log(obj);
     };
     $scope.onSubmitClick=function(files) {
     console.log(files);
     }
     ...</script>

    API

    名称参数说明
    removeByName名称( 字符串)按名称删除文件
    移除 removeAll删除所有文件
    addRemoteFileurl(string), name(string), 类型( 字符串)添加用于预览的远程url文件
    <lf-ng-md-file-inputlf-files="files"lf-api="api"></lf-ng-md-file-input>
    <md-buttonclass="md-raised md-warn"ng-click="api.removeAll()">remove all</md-button>
    <script>...$timeout(
     function(){
     $scope.api.addRemoteFile('http://shuyu.github.io/angular-material-fileinput/example/resources/sample.jpg','sample.jpg','image');
     $scope.api.addRemoteFile('http://shuyu.github.io/angular-material-fileinput/example/resources/sample.mp4','sample.mp4','video');
     $scope.api.addRemoteFile('http://shuyu.github.io/angular-material-fileinput/example/resources/sample.mp3','sample.mp3','audio');
     $scope.api.addRemoteFile('http://shuyu.github.io/angular-material-fileinput/example/resources/sample.pdf','sample.pdf','other');
     }
     )
     ...</script>

    目前addRemoteFile仅支持 4种类型包括"图像"、"视频"、"音频"和"其它"。 通过使用addRemoteFile文件添加文件也将存在于lf文件 array 但使用属性 isRemote: 真,当你上传文件时,你应该再做一个作业来检查isRemote的true 或者 false,如果应该忽略它,那么。

    screensho 3

    命令行选项

    名称 描述
    browseIconCls将类设置为浏览 icon
    removeIconCls将类设置为删除 icon
    captionIconCls将类设置为标题 icon
    unknowIconCls将类设置为未知的icon
    <style>.myBrowse{ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48cG9seWdvbiBmaWxsPSIjQzdCMTNDIiBwb2ludHM9IjczLDQgMTksNCAxOSwxMjQgMTA5LDEyNCAxMDksNDAgICIvPjwvZz48ZyBvcGFjaXR5PSIwLjIiPjxwb2x5Z29uIGZpbGw9IiMwNzBCMEMiIHBvaW50cz0iNzMsNDAgMTA5LDQwIDczLDQgICIvPjwvZz48Zz48cGF0aCBkPSJNMTA5LDEyNS4ySDE5Yy0wLjcsMC0xLjItMC42LTEuMi0xLjJWNGMwLTAuNywwLjYtMS4yLDEuMi0xLjJoNTBjNi4yLDAsMTEuMiw1LDExLjIsMTEuMnYxOC44SDk5ICAgYzYuMiwwLDExLjIsNSwxMS4yLDExLjJ2ODBDMTEwLjIsMTI0LjcsMTA5LjcsMTI1LjIsMTA5LDEyNS4yeiBNMjAuMiwxMjIuOGg4Ny41VjQ0YzAtNC44LTMuOS04LjgtOC44LTguOEg3OSAgIGMtMC43LDAtMS4yLTAuNi0xLjItMS4yVjE0YzAtNC44LTMuOS04LjgtOC44LTguOEgyMC4yVjEyMi44eiIgZmlsbD0iIzFFMUUxRSIvPjwvZz48Zz48Zz48cGF0aCBkPSJNNzYsNi45YzEuOCwxLjgsMyw0LjMsMyw3LjF2MjBoMjBjMi43LDAsNS4yLDEuMSw3LDIuOWgwTDc2LDYuOUw3Niw2Ljl6IiBmaWxsPSIjNDM0NDQ0Ii8+PC9nPjwvZz48Zz48Zz48cGF0aCBkPSJNMTA2LDM4LjFMMTA2LDM4LjFjLTAuMywwLTAuNy0wLjEtMC45LTAuNGMtMS43LTEuNi0zLjgtMi41LTYuMi0yLjVINzljLTAuNywwLTEuMi0wLjYtMS4yLTEuMlYxNCAgICBjMC0yLjQtMC45LTQuNi0yLjYtNi4yYy0wLjItMC4yLTAuNC0wLjYtMC40LTAuOWMwLTAuNSwwLjMtMSwwLjgtMS4yYzAuNS0wLjIsMS0wLjEsMS40LDAuM2wzMCwzMGMwLjQsMC40LDAuNSwwLjksMC4zLDEuNCAgICBDMTA3LDM3LjgsMTA2LjUsMzguMSwxMDYsMzguMXogTTgwLjIsMzIuOEg5OWMwLjQsMCwwLjgsMCwxLjIsMC4xbC0yMC0yMGMwLDAuNCwwLjEsMC44LDAuMSwxLjJWMzIuOHoiIGZpbGw9IiMxRTFFMUUiLz48L2c+PC9nPjxnPjxnPjxwYXRoIGQ9Ik02MS4zLDkzLjNjLTUuOSwwLTExLjQtMi4zLTE1LjYtNi40cy02LjQtOS43LTYuNC0xNS42YzAtNS45LDIuMy0xMS40LDYuNC0xNS42YzQuMi00LjIsOS43LTYuNCwxNS42LTYuNCAgICBjNS45LDAsMTEuNCwyLjMsMTUuNiw2LjRjOC42LDguNiw4LjYsMjIuNSwwLDMxLjFDNzIuNyw5MSw2Ny4yLDkzLjMsNjEuMyw5My4zeiBNNjEuMyw1Ny4zYy0zLjcsMC03LjMsMS41LTkuOSw0LjEgICAgYy0yLjYsMi42LTQuMSw2LjItNC4xLDkuOWMwLDMuNywxLjUsNy4zLDQuMSw5LjljMi42LDIuNiw2LjIsNC4xLDkuOSw0LjFjMy43LDAsNy4zLTEuNSw5LjktNC4xYzUuNS01LjUsNS41LTE0LjMsMC0xOS44ICAgIEM2OC42LDU4LjgsNjUuMSw1Ny4zLDYxLjMsNTcuM3oiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PHJlY3QgZmlsbD0iI0ZGRkZGRiIgaGVpZ2h0PSI4IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjcwNzEgMC43MDcxIC0wLjcwNzEgMC43MDcxIDg2LjQzNDggLTI5Ljk0NDYpIiB3aWR0aD0iMjMiIHg9IjY3LjkiIHk9Ijg1LjQiLz48L2c+PC9nPjwvc3ZnPg==); }.myRemove{ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48cG9seWdvbiBmaWxsPSIjRTM2MjQ5IiBwb2ludHM9IjczLDQgMTksNCAxOSwxMjQgMTA5LDEyNCAxMDksNDAgICIvPjwvZz48ZyBvcGFjaXR5PSIwLjIiPjxwb2x5Z29uIGZpbGw9IiMwNzBCMEMiIHBvaW50cz0iNzMsNDAgMTA5LDQwIDczLDQgICIvPjwvZz48Zz48cGF0aCBkPSJNMTA5LDEyNS4ySDE5Yy0wLjcsMC0xLjItMC42LTEuMi0xLjJWNGMwLTAuNywwLjYtMS4yLDEuMi0xLjJoNTBjNi4yLDAsMTEuMiw1LDExLjIsMTEuMnYxOC44SDk5ICAgYzYuMiwwLDExLjIsNSwxMS4yLDExLjJ2ODBDMTEwLjIsMTI0LjcsMTA5LjcsMTI1LjIsMTA5LDEyNS4yeiBNMjAuMiwxMjIuOGg4Ny41VjQ0YzAtNC44LTMuOS04LjgtOC44LTguOEg3OSAgIGMtMC43LDAtMS4yLTAuNi0xLjItMS4yVjE0YzAtNC44LTMuOS04LjgtOC44LTguOEgyMC4yVjEyMi44eiIgZmlsbD0iIzFFMUUxRSIvPjwvZz48Zz48Zz48cGF0aCBkPSJNNzYsNi45YzEuOCwxLjgsMyw0LjMsMyw3LjF2MjBoMjBjMi43LDAsNS4yLDEuMSw3LDIuOWgwTDc2LDYuOUw3Niw2Ljl6IiBmaWxsPSIjNDM0NDQ0Ii8+PC9nPjwvZz48Zz48Zz48cGF0aCBkPSJNMTA2LDM4LjFMMTA2LDM4LjFjLTAuMywwLTAuNy0wLjEtMC45LTAuNGMtMS42LTEuNi0zLjgtMi41LTYuMi0yLjVINzljLTAuNywwLTEuMi0wLjYtMS4yLTEuMlYxNCAgICBjMC0yLjQtMC45LTQuNi0yLjYtNi4yYy0wLjItMC4yLTAuNC0wLjYtMC40LTAuOWMwLTAuNSwwLjMtMSwwLjgtMS4yYzAuNS0wLjIsMS0wLjEsMS40LDAuM2wzMCwzMGMwLjQsMC40LDAuNSwwLjksMC4zLDEuNCAgICBTMTA2LjUsMzguMSwxMDYsMzguMXogTTgwLjIsMzIuOEg5OWMwLjQsMCwwLjgsMCwxLjIsMC4xbC0yMC0yMGMwLDAuNCwwLjEsMC44LDAuMSwxLjJWMzIuOHoiIGZpbGw9IiMxRTFFMUUiLz48L2c+PC9nPjxnPjxnPjxnPjxwYXRoIGQ9Ik04MSw5Nkg0N1Y3MGgzNFY5NnogTTUzLDkwaDIyVjc2SDUzVjkweiIgZmlsbD0iI0ZGRkZGRiIvPjwvZz48Zz48cmVjdCBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjYiIHdpZHRoPSIzNCIgeD0iNDciIHk9IjU4Ii8+PC9nPjxnPjxyZWN0IGZpbGw9IiNGRkZGRkYiIGhlaWdodD0iMTIiIHdpZHRoPSI2IiB4PSI2MSIgeT0iNTIiLz48L2c+PC9nPjxnPjxyZWN0IGZpbGw9IiNGRkZGRkYiIGhlaWdodD0iMjQiIHdpZHRoPSI2IiB4PSI2MSIgeT0iNzEiLz48L2c+PC9nPjwvc3ZnPg==); }.myCaption{ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48cG9seWdvbiBmaWxsPSIjRTk3ODNDIiBwb2ludHM9IjczLDQgMTksNCAxOSwxMjQgMTA5LDEyNCAxMDksNDAgICIvPjwvZz48ZyBvcGFjaXR5PSIwLjIiPjxwb2x5Z29uIGZpbGw9IiMwNzBCMEMiIHBvaW50cz0iNzMsNDAgMTA5LDQwIDczLDQgICIvPjwvZz48Zz48cGF0aCBkPSJNMTA5LDEyNS4ySDE5Yy0wLjcsMC0xLjItMC42LTEuMi0xLjJWNGMwLTAuNywwLjYtMS4yLDEuMi0xLjJoNTBjNi4yLDAsMTEuMiw1LDExLjIsMTEuMnYxOC44SDk5ICAgYzYuMiwwLDExLjIsNSwxMS4yLDExLjJ2ODBDMTEwLjIsMTI0LjcsMTA5LjcsMTI1LjIsMTA5LDEyNS4yeiBNMjAuMiwxMjIuOGg4Ny41VjQ0YzAtNC44LTMuOS04LjgtOC44LTguOEg3OSAgIGMtMC43LDAtMS4yLTAuNi0xLjItMS4yVjE0YzAtNC44LTMuOS04LjgtOC44LTguOEgyMC4yVjEyMi44eiIgZmlsbD0iIzFFMUUxRSIvPjwvZz48Zz48Zz48cGF0aCBkPSJNNzYsNi45YzEuOCwxLjgsMyw0LjMsMyw3LjF2MjBoMjBjMi43LDAsNS4yLDEuMSw3LDIuOWgwTDc2LDYuOUw3Niw2Ljl6IiBmaWxsPSIjNDM0NDQ0Ii8+PC9nPjwvZz48Zz48Zz48cGF0aCBkPSJNMTA2LDM4LjFMMTA2LDM4LjFjLTAuMywwLTAuNy0wLjEtMC45LTAuNGMtMS42LTEuNi0zLjgtMi41LTYuMi0yLjVINzljLTAuNywwLTEuMi0wLjYtMS4yLTEuMlYxNCAgICBjMC0yLjQtMC45LTQuNi0yLjYtNi4yYy0wLjItMC4yLTAuNC0wLjYtMC40LTAuOWMwLTAuNSwwLjMtMSwwLjgtMS4yYzAuNS0wLjIsMS0wLjEsMS40LDAuM2wzMCwzMGMwLjQsMC40LDAuNSwwLjksMC4zLDEuNCAgICBTMTA2LjUsMzguMSwxMDYsMzguMXogTTgwLjIsMzIuOEg5OWMwLjQsMCwwLjgsMCwxLjIsMC4xbC0yMC0yMGMwLDAuNCwwLjEsMC44LDAuMSwxLjJWMzIuOHoiIGZpbGw9IiMxRTFFMUUiLz48L2c+PC9nPjxnPjxnPjxyZWN0IGZpbGw9IiNGRkZGRkYiIGhlaWdodD0iOCIgd2lkdGg9IjI4IiB4PSI1OCIgeT0iNTYiLz48L2c+PGc+PHJlY3QgZmlsbD0iI0ZGRkZGRiIgaGVpZ2h0PSI4IiB3aWR0aD0iMjgiIHg9IjU4IiB5PSI3MCIvPjwvZz48Zz48cmVjdCBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjgiIHdpZHRoPSIyOCIgeD0iNTgiIHk9Ijg0Ii8+PC9nPjxnPjxyZWN0IGZpbGw9IiNGRkZGRkYiIGhlaWdodD0iOCIgd2lkdGg9IjgiIHg9IjQyIiB5PSI1NiIvPjwvZz48Zz48cmVjdCBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjgiIHdpZHRoPSI4IiB4PSI0MiIgeT0iNzAiLz48L2c+PGc+PHJlY3QgZmlsbD0iI0ZGRkZGRiIgaGVpZ2h0PSI4IiB3aWR0aD0iOCIgeD0iNDIiIHk9Ijg0Ii8+PC9nPjwvZz48L3N2Zz4=); }.myUnknow{ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48cG9seWdvbiBmaWxsPSIjRTlCNTNBIiBwb2ludHM9IjczLDQgMTksNCAxOSwxMjQgMTA5LDEyNCAxMDksNDAgICIvPjwvZz48ZyBvcGFjaXR5PSIwLjIiPjxwb2x5Z29uIGZpbGw9IiMwNzBCMEMiIHBvaW50cz0iNzMsNDAgMTA5LDQwIDczLDQgICIvPjwvZz48Zz48cGF0aCBkPSJNMTA5LDEyNS4ySDE5Yy0wLjcsMC0xLjItMC42LTEuMi0xLjJWNGMwLTAuNywwLjYtMS4yLDEuMi0xLjJoNTBjNi4yLDAsMTEuMiw1LDExLjIsMTEuMnYxOC44SDk5ICAgYzYuMiwwLDExLjIsNSwxMS4yLDExLjJ2ODBDMTEwLjIsMTI0LjcsMTA5LjcsMTI1LjIsMTA5LDEyNS4yeiBNMjAuMiwxMjIuOGg4Ny41VjQ0YzAtNC44LTMuOS04LjgtOC44LTguOEg3OSAgIGMtMC43LDAtMS4yLTAuNi0xLjItMS4yVjE0YzAtNC44LTMuOS04LjgtOC44LTguOEgyMC4yVjEyMi44eiIgZmlsbD0iIzFFMUUxRSIvPjwvZz48Zz48Zz48cGF0aCBkPSJNNzYsNi45YzEuOCwxLjgsMyw0LjMsMyw3LjF2MjBoMjBjMi43LDAsNS4yLDEuMSw3LDIuOWgwTDc2LDYuOUw3Niw2Ljl6IiBmaWxsPSIjNDM0NDQ0Ii8+PC9nPjwvZz48Zz48Zz48cGF0aCBkPSJNMTA2LDM4LjFMMTA2LDM4LjFjLTAuMywwLTAuNy0wLjEtMC45LTAuNGMtMS43LTEuNi0zLjgtMi41LTYuMi0yLjVINzljLTAuNywwLTEuMi0wLjYtMS4yLTEuMlYxNCAgICBjMC0yLjQtMC45LTQuNi0yLjYtNi4yYy0wLjItMC4yLTAuNC0wLjYtMC40LTAuOWMwLTAuNSwwLjMtMSwwLjgtMS4yYzAuNS0wLjIsMS0wLjEsMS40LDAuM2wzMCwzMGMwLjQsMC40LDAuNSwwLjksMC4zLDEuNCAgICBDMTA3LDM3LjgsMTA2LjUsMzguMSwxMDYsMzguMXogTTgwLjIsMzIuOEg5OWMwLjQsMCwwLjgsMCwxLjIsMC4xbC0yMC0yMGMwLDAuNCwwLjEsMC44LDAuMSwxLjJWMzIuOHoiIGZpbGw9IiMxRTFFMUUiLz48L2c+PC9nPjxnPjxnPjxjaXJjbGUgY3g9IjY0IiBjeT0iODkiIGZpbGw9IiNGRkZGRkYiIHI9IjUiLz48L2c+PGc+PGc+PHJlY3QgZmlsbD0iI0ZGRkZGRiIgaGVpZ2h0PSIyOCIgd2lkdGg9IjgiIHg9IjYwIiB5PSI1MCIvPjwvZz48L2c+PC9nPjwvc3ZnPg==); }</style>
    <scripttype="text/javascript">...$scope.option= {"browseIconCls":"myBrowse","removeIconCls":"myRemove","captionIconCls":"myCaption","unknowIconCls":"myUnknow" }...</script>
    <lf-ng-md-file-inputlf-files="files"lf-option="option"></lf-ng-md-file-input>

    发布历史

    • v1.5.2
      • 支持更改
      • 添加提交按钮
    • v1.5.1
      • 由于缺少注射器,修复失败。
    • v1.5.0
      • 大量代码体系结构更改。
      • 添加 addRemoteFile api。
      • 为removeFile添加回调。
      • 修复验证 Bug。
      • 修复浏览按钮在 Firefox 上不起作用
      • 当文件具有相同名称时深度检查。
      • 如果mimetype可以与","ex一起使用: image/*,video/*.
    • v1.4.8
      • 按名称删除文件的新 api。
      • 修复预览 Bug。
    • v1.4.7
      • 具有相同 NAME的文件将覆盖。
      • 新属性:lf-on-file-click。
    • v1.4.6
      • 修复 IE 点击事件。
    • v1.4.5
      • 修复拖放事件。
    • v1.4.4
      • 添加进度属性。
    • v1.4.3
      • 删除 console.log 调用。
    • v1.4.2
      • 添加 lf-capion属性以自定义文件标题。
      • 在 $compileProvider.debugInfoEnabled(false). 时修复 Bug
    • v1.4.1
      • 添加MIME类型验证。
      • 添加aria标签。
    • v1.4.0
      • 添加验证功能。
    • v1.3.1
      • 修复 Firefox 上传按钮。
    • v1.3.0
      • 使模板与 Angular 材质非常兼容。
      • 移除angular-material-icons依赖项并添加新的lf选项属性以使 icon 变变。
    • v1.2.0
      • 新的lf属性绑定到与指令的交互。
    • v1.1.0
      • 新属性:lf-drag-and-drop-label,lf-browse-label和 lf-remove-label。
    • v1.0.0
      • 标准功能。
    • v0.1.0
      • 初始版本。


    文章标签:文件  angular  MAT  Material  MATE  输入  文件上传  Angular Material  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语