The basic usage tutorial of the upload Command ng-upload in Angular. js, angularngfileupload

The basic usage tutorial of the upload Command ng-upload in Angular. js, angularngfileupload

Preface

This article mainly introduces the basic usage of the upload Command ng-upload in Angular. js for your reference. Let's not talk about it here. Let's take a look at the details:

The basic usage of the Angular upload Command ng-upload, including online preview of uploaded files, images, and images and videos, is very powerful. Ng-upload can be used in either of the following ways: upload files, store files, or select an upload function immediately, although this function does not perform http upload operations.

1. First include the library file

<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. Select only, with submit upload

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. Select and upload immediately

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. the upload module can also display image preview.

Image thumbnail:  Audio preview: <audio controls ngf-src="file"></audio>Video preview: <video controls ngf-src="file"></video>

Note the following:The file here is not the image path,,ngf-select ng-model="file" name="file"Orngf-select="upload($file)The file object passed to call the function.

Summary

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message to us. Thank you for your support.