基于javaScript开发最实用的书管理系统+源码+开发文档+项目代码解析+数据库（毕业设计&课程设计&项目开发）

[](http://badge.fury.io/js/ng-file-upload) [](https://npmjs.org/package/ng-file-upload) [](http://issuestats.com/github/danialfarid/ng-file-upload) [](http://issuestats.com/github/danialfarid/ng-file-upload)<br/> [](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=danial%2efarid%40gmail%2ecom&lc=CA&item_name=ng%2dfile%2dupload&item_number=ng%2dfile%2dupload&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted) [](https://gratipay.com/ng-file-upload/) ng-file-upload =================== Lightweight Angular directive to upload files. **See the <a href="https://angular-file-upload.appspot.com/" target="_blank">DEMO</a> page.** Reference docs [here](https://github.com/danialfarid/ng-file-upload/blob/master/README.md) **Migration notes**: [version 3.0.x](https://github.com/danialfarid/ng-file-upload/releases/tag/3.0.0) [version 3.1.x](https://github.com/danialfarid/ng-file-upload/releases/tag/3.1.0) [version 3.2.x](https://github.com/danialfarid/ng-file-upload/releases/tag/3.2.3) [version 4.x.x](https://github.com/danialfarid/ng-file-upload/releases/tag/4.0.0) [version 5.x.x](https://github.com/danialfarid/ng-file-upload/releases/tag/5.0.0) [version 6.x.x](https://github.com/danialfarid/ng-file-upload/releases/tag/6.0.0) [version 6.2.x](https://github.com/danialfarid/ng-file-upload/releases/tag/6.2.0) [version 7.0.x](https://github.com/danialfarid/ng-file-upload/releases/tag/7.0.0) [version 7.2.x](https://github.com/danialfarid/ng-file-upload/releases/tag/7.2.0) [version 8.0.x](https://github.com/danialfarid/ng-file-upload/releases/tag/8.0.1) [version 9.0.x](https://github.com/danialfarid/ng-file-upload/releases/tag/9.0.0) [version 10.0.x](https://github.com/danialfarid/ng-file-upload/releases/tag/10.0.0) [version 11.0.x](https://github.com/danialfarid/ng-file-upload/releases/tag/11.0.0) Ask questions on [StackOverflow](http://stackoverflow.com/) under the [ng-file-upload](http://stackoverflow.com/tags/ng-file-upload/) tag.<br/> For bug report or feature request please search through existing [issues](https://github.com/danialfarid/ng-file-upload/issues) first then open a new one [here](https://github.com/danialfarid/ng-file-upload/issues/new). For faster response provide steps to reproduce/versions with a jsfiddle link. If you need support for your company contact [me](mailto:danial.farid@gmail.com).<br/> If you like this plugin give it a thumbs up at [ngmodules](http://ngmodules.org/modules/ng-file-upload) or get me a <a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=danial%2efarid%40gmail%2ecom&lc=CA&item_name=ng%2dfile%2dupload&item_number=ng%2dfile%2dupload&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted">cup of tea <img src="https://angular-file-upload.appspot.com/img/tea.png" width="40" height="24" title="Icon made by Freepik.com"></a>. Contributions welcomed. Table of Content: * [Features](#features) * [Install](#install) ([Manual](#manual), [Bower](#bower), [NuGet](#nuget), [NPM](#npm)) * [Usage](#usage) * [Old Browsers](#old_browsers) * [Server Side](#server) * [Samples](#server) ([Java](#java), [Spring](#spring), [Node.js](#node), [Rails](#rails), [PHP](#php), [.Net](#net)) * [CORS](#cors) * [Amazon S3 Upload](#s3) ##<a name="features"></a> Features * file upload progress, cancel/abort * file drag and drop (html5 only) * image paste form clipboard and drag and drop from browser pages (html5 only). * image resize and center crop (native) and user controlled crop through [ngImgCrop](https://github.com/alexk111/ngImgCrop). See [crop sample](http://jsfiddle.net/xxo3sk41/1/) (html5 only) * orientation fix for jpeg image files with exif orientation data * resumable uploads: pause/resume upload (html5 only) * native validation support for file type/size, image width/height/aspect ratio, video/audio duration, and `ng-required` with pluggable cusome sync or async validations. * show thumbnail or preview of selected images/audio/videos * supports CORS and direct upload of file's binary data using `Upload.$http()` * plenty of sample server side code, available on nuget * on demand flash [FileAPI](https://github.com/mailru/FileAPI) shim loading no extra load for html5 browsers. * HTML5 FileReader.readAsDataURL shim for IE8-9 * available on [npm](https://www.npmjs.com/package/ng-file-upload), [bower](https://libraries.io/bower/ng-file-upload), [meteor](https://atmospherejs.com/danialf/ng-file-upload), [nuget](https://www.nuget.org/packages/angular-file-upload) ##<a name="install"></a> Install * <a name="manual"></a>**Manual**: download latest from [here](https://github.com/danialfarid/ng-file-upload-bower/releases/latest) * <a name="bower"></a>**Bower**: * `bower install ng-file-upload-shim --save`(for non html5 suppport) * `bower install ng-file-upload --save` * <a name="nuget"></a>**NuGet**: `PM> Install-Package angular-file-upload` (thanks to [Georgios Diamantopoulos](https://github.com/georgiosd)) * <a name="npm"></a>**NPM**: `npm install ng-file-upload` ```html <script src="angular(.min).js"></script> <script src="ng-file-upload-shim(.min).js"></script> <!-- for no html5 browsers support --> <script src="ng-file-upload(.min).js"></script> ``` ##<a name="usage"></a> Usage ###Samples: * Upload with form submit and validations: [http://jsfiddle.net/danialfarid/maqbzv15/544/](http://jsfiddle.net/danialfarid/maqbzv15/544/) * Upload multiple files one by one on file select: [http://jsfiddle.net/danialfarid/2vq88rfs/136/](http://jsfiddle.net/danialfarid/2vq88rfs/136/) * Upload multiple files in one request on file select (html5 only): [http://jsfiddle.net/danialfarid/huhjo9jm/5/](http://jsfiddle.net/danialfarid/huhjo9jm/5/) * Upload single file on file select: [http://jsfiddle.net/danialfarid/0mz6ff9o/135/](http://jsfiddle.net/danialfarid/0mz6ff9o/135/) * Drop and upload with $watch: [http://jsfiddle.net/danialfarid/s8kc7wg0/219/](http://jsfiddle.net/danialfarid/s8kc7wg0/219/) * Image Crop and Upload [http://jsfiddle.net/xxo3sk41/1/](http://jsfiddle.net/xxo3sk41/1/) ```html <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> 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> 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> Image thumbnail: <img ngf-thumbnail="file || '/thumb.jpg'"> Audio preview: <audio controls ngf-src="file"></audio> Video preview: <video controls ngf-src="file"></vid