当前位置: 首页 > 编程笔记 >

Angular.js中上传指令ng-upload的基本使用教程

东方富
2023-03-14
本文向大家介绍Angular.js中上传指令ng-upload的基本使用教程,包括了Angular.js中上传指令ng-upload的基本使用教程的使用技巧和注意事项,需要的朋友参考一下

前言

本文主要给大家介绍了关于Angular.js中上传指令ng-upload的基本使用,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍:

Angular上传指令ng-upload的基本使用,包括上传文件,图片,以及图片和视频在线预览,非常强大。ng-upload有两种用法,一种是选择上传文件,仅仅存起来,还有一种就是选择之后,立刻出发一个上传函数,虽然这个函数可以不做http upload的操作。

1.首先包含库文件

<script src="angular.min.js"></script>
 <!-- shim is needed to support non-HTML5 FormData browsers (IE8-9)-->
 <script src="ng-file-upload-shim.min.js"></script>
 <script src="ng-file-upload.min.js"></script>

2.只选择,有submit上传

Upload on form submit or button click
 <form ng-app="fileUpload" ng-controller="MyCtrl" name="form">
 Single Image with validations
 <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'"
 ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" 
 ngf-resize="{width: 100, height: 100}">Select</div>
 Multiple files
 <div class="button" ngf-select ng-model="files" ngf-multiple="true">Select</div>
 Drop files: <div ngf-drop ng-model="files" class="drop-box">Drop</div>
 <button type="submit" ng-click="submit()">submit</button>
 </form>

3.选择之后,立马上传

Upload right away after file selection:
 <div class="button" ngf-select="upload($file)">Upload on file select</div>
 <div class="button" ngf-select="uploadFiles($files)" multiple="multiple">Upload on file select</div>
 Drop File:
 <div ngf-drop="uploadFiles($files)" class="drop-box"
 ngf-drag-over-class="'dragover'" ngf-multiple="true" 
 ngf-pattern="'image/*,application/pdf'">Drop Images or PDFs files here</div>
<div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>

4.upload模块还能显示图片预览

Image thumbnail: <img ngf-thumbnail="file || '/thumb.jpg'">
 Audio preview: <audio controls ngf-src="file"></audio>
Video preview: <video controls ngf-src="file"></video>

这个里面注意了:这里面的file不是图片路径,而是,ngf-select ng-model="file" name="file"操作的时候,或者ngf-select="upload($file)传给调用函数的那个file对象

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对小牛知识库的支持

 类似资料:
  • 本文向大家介绍AngularJS基础 ng-href 指令用法,包括了AngularJS基础 ng-href 指令用法的使用技巧和注意事项,需要的朋友参考一下 AngularJS ng-href 指令 AngularJS 实例 使用 AngularJS 设置添加链接: 定义和用法 ng-href 指令覆盖了原生的 <a> 元素 href 属性。 如果在 href 的值中有 AngularJS 代码

  • 本文向大家介绍AngularJS基础 ng-if 指令用法,包括了AngularJS基础 ng-if 指令用法的使用技巧和注意事项,需要的朋友参考一下 AngularJS ng-if 指令 AngularJS 实例 取消选中,并移除内容: 定义和用法 ng-if 指令用于在表达式为 false 时移除 HTML 元素。 如果 if 语句执行的结果为 true,会添加移除元素,并显示。 ng-if

  • 定义 上传组件。 图片展示 代码演示 import Upload from 'pile/dist/components/upload' const { UploadImage, UploadImageArray } = Upload; // 单张图片上传 <UploadImage onLoadSuccess={(o) => { console.log(o); }} /> // 多张图片上传(默

  • Upload 上传 平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √ √ 基本使用 可以通过设置file-list参数(数组,元素为对象),显示预置的图片。其中元素的url属性为图片路径 设置action参数为后端服务器地址,注意H5在浏览器可能会有跨域限制,让后端允许域即可 <template> <u-upload :action

  • 通过点击或者拖拽上传文件 点击上传 通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作。 <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/po

  • Upload 上传 通过点击或者拖拽上传文件 点击上传 ::: demo 通过 tip属性 你可以传入自定义的上传按钮类型和文字提示。 render() { const fileList = [ {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpe