angularImageUpload

Множественная загрузка изображений на angularjs при помощи HTML5. Если браузер не поддержывает HTML5, то загрузка осуществляется через iFrame или при помощи Flash (библиотека SFWuplode).

Как использовать?

1. Подключение:

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

2. Настройка:

   • В шаблоне:

     <input type="file" data-uploade-source="flash" settings="uplode1" result="uploader1"/>
     

     Простое поле для выбора файлов. В нем settings - имя объекта scope, в который будут переданы настройки. result - имя объекта в scope для вывода результатов. Директива также принимает указание, какой загрузчик использовать если браузер не поддерживает HTML5. Если директива data-uploade-source вызвана без параметра, то при отсутствии поддержки html5 будет использован загрузчик через iFrame. Если передан параметр "flash", то будет использована загрузка через flash при помощи библиотеки SWFupload В связке с полем загрузки файлов также можно использовать поле для Drag and Drop:

     <div data-drop-zone result="uploader" id="dropZone" ng-show="uploader.isHtml5">
         <div ng-repeat="item in uploader.queue" class="dropPreview sort" id="{{item.unicid}}" data-drag-sort="item">
             <b ng-click="item.remove()" class="fa fa-times-circle fa-2x pointer close"></b>
             <div ng-show="uploader.isHtml5" data-image-thumb="item.file" class="thumbs" data-width="100"></div>
             {{item.file.name}}
         </div>
     </div>
     

     Если в аттрибут result будет передан тот же объект, который был создан в начале, то оба поля будут взаимодействовать совместно. Если будет указан другой объект, то это будет уже отдельная сущность для загрузки, при этом также будет необходимо указать аттрибут settings для конфигурирования.
   • В контроллере:

     app.controller("uploadeController", ['$scope', '$imageUploade', function ($scope, $imageUploade) {
         //Конфиг для первого загрузчика
         $scope.uplode1 = {
             url: "uploade.php",//Куда отправлять картинки на обработку
             acceptTypes: ['jpeg', 'jpg', 'png', 'gif'],//Типы файлов разрешеные для загрузки
             multiple: true,//Мультизагрузка файлов
             post_params: {test: 'lalka'},//Параметры переданные сюда будут добавлены к запросу
             swfUploadOptions: {//Настройки для flash-загрузчика
                 flash_url: "js/libs/swfupload/swfupload.swf",//Путь до газрузчика
                 button_placeholder_id: "uploadButton",//id контейнера для куда будет установлена кнопка
                 button_width: 100,
                 button_height: 30,
                 button_text_left_padding: 15,
                 button_text_top_padding: 2,
                 button_text: "Обзор...",
                 button_text_style: ".uploadBtn { font-size: 18px; font-family: Arial; background-color: #FF0000; }"
             }
         };
         //Конфиг для второго загрузчика
         $scope.uplode2 = {
             url: "uploade.php",
             acceptTypes: ['jpeg', 'jpg', 'png', 'gif']
         };
         //И так сколько угодно
     }]);
     

     После создания объекта загрузчика можно получить его, для того чтобы прослушивать его события и вмешиваться в процесс его работы.

     $imageUploade.getInstance($scope, 'uploader1', function (uplode) {
         //Перед отправкой запроса (например можно добавить какие-нибудь доп. данные к запросу)
         uplode.bind('beforeUplode', function (event, item) {
             uplode.post_params = {name: 'erick'};
         });
         //После сортироки элементов
         uplode.bind('afterSort', function (event, what, whereat, queue) {
             console.log(what);
         });
         //После загрузки файла
         uplode.bind('uplodeItemComplite', function (event, item, response) {
             console.log(response);
         });
         //После удаления элемента из набора
         uplode.bind('uplodeItemRemove', function (event, item) {
             console.log(item);
         });
     });
     $imageUploade.getInstance($scope, 'uploader2', function (uplode) {
         uplode.bind('beforeUplode', function (event, item) {
             uplode.post_params = {name: 'erick'};
         });
     });
     

3. Пример шаблона:

   <div data-drop-zone result="uploader" id="dropZone" ng-show="uploader.isHtml5">
       <div ng-repeat="item in uploader.queue" class="dropPreview sort" id="{{item.unicid}}" data-drag-sort="item">
           <b ng-click="item.remove()" class="fa fa-times-circle fa-2x pointer close"></b>
           <div ng-show="uploader.isHtml5" data-image-thumb="item.file" class="thumbs" data-width="100"></div>
           {{item.file.name}}
       </div>
   </div>
   <input type="file" data-uploade-source="flash" settings="uplode1" result="uploader"/>
   <div id="all">{{uploader.allUploded}}</div>
   <div class="uplode_list">
       <table>
           <tr ng-repeat="item in uploader.queue" class="sort" id="{{item.unicid}}" data-drag-sort="item">
               <td class="uplode-item">
                   <div ng-show="uploader.isHtml5" data-image-thumb="item.file" class="thumbs" data-width="100"></div>
                       {{item.file.name}}
               </td>
               <td ng-show="item.file.size">{{item.mbSize}} мб.</td>
               <td ng-show="uploader.isHtml5">
                   <div class="progress-bar">
                       <span style="width: {{item.progress}}%"></span>
                   </div>
               </td>
               <td>
                   <span class="{{item.isUploaded ? 'good fa fa-check fa-2x' : 'loading'}}"></span>
               </td>
               <td>
                   <b ng-click="item.remove()" class="fa fa-times-circle fa-2x pointer close"></b>
               </td>
           </tr>
       </table>
   </div>
   

---

angularImageUpload ================== Upload multiple images and other files on angularess using HTML5. If your browser does not support HTML5, and then upload via iFrame or Flash (SFWuplode library).

How to use it?

1. Installation:

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

2. Configuration:

   • In template:

     <input type="file" data-uploade-source="flash" settings="uplode1" result="uploader1"/>
     

     This is field to select files, where settings - object for module configuration, result - object to display the results. If your browser does not support HTML5 and directive called as:

         data-uploade-source="flash"
     

     Then the files are loaded using Flash otherwise be used iFrame. To download files, you can also use the area "Drag ang Drop":

     <div data-drop-zone result="uploader" id="dropZone" ng-show="uploader.isHtml5">
         <div ng-repeat="item in uploader.queue" class="dropPreview sort" id="{{item.unicid}}" data-drag-sort="item">
             <b ng-click="item.remove()" class="fa fa-times-circle fa-2x pointer close"></b>
             <div ng-show="uploader.isHtml5" data-image-thumb="item.file" class="thumbs" data-width="100"></div>
             {{item.file.name}}
         </div>
     </div>
     

     They may be interdependent or be operated independently of each other.
   • In controller:

     app.controller("uploadeController", ['$scope', '$imageUploade', function ($scope, $imageUploade) {
         //Configuration to first uploder
         $scope.uplode1 = {
             url: "uploade.php",//Куда отправлять картинки на обработку
             acceptTypes: ['jpeg', 'jpg', 'png', 'gif'],//Типы файлов разрешеные для загрузки
             multiple: true,//Мультизагрузка файлов
             post_params: {test: 'lalka'},//Параметры переданные сюда будут добавлены к запросу
             swfUploadOptions: {//Настройки для flash-загрузчика
                 flash_url: "js/libs/swfupload/swfupload.swf",//Путь до газрузчика
                 button_placeholder_id: "uploadButton",//id контейнера для куда будет установлена кнопка
                 button_width: 100,
                 button_height: 30,
                 button_text_left_padding: 15,
                 button_text_top_padding: 2,
                 button_text: "Обзор...",
                 button_text_style: ".uploadBtn { font-size: 18px; font-family: Arial; background-color: #FF0000; }"
             }
         };
         //Configuration to second uploder
         $scope.uplode2 = {
             url: "uploade.php",
             acceptTypes: ['jpeg', 'jpg', 'png', 'gif']
         };
     }]);
     

     After initialization module, you cann use module events:

     $imageUploade.getInstance($scope, 'uploader1', function (uplode) {
         //Before uploading
         uplode.bind('beforeUplode', function (event, item) {
             uplode.post_params = {name: 'erick'};
         });
         //After sorting
         uplode.bind('afterSort', function (event, what, whereat, queue) {
             console.log(what);
         });
         //After uploading
         uplode.bind('uplodeItemComplite', function (event, item, response) {
             console.log(response);
         });
         //After remove
         uplode.bind('uplodeItemRemove', function (event, item) {
             console.log(item);
         });
     });
     $imageUploade.getInstance($scope, 'uploader2', function (uplode) {
         uplode.bind('beforeUplode', function (event, item) {
             uplode.post_params = {name: 'erick'};
         });
     });
     

3. Template example:

   <div data-drop-zone result="uploader" id="dropZone" ng-show="uploader.isHtml5">
       <div ng-repeat="item in uploader.queue" class="dropPreview sort" id="{{item.unicid}}" data-drag-sort="item">
           <b ng-click="item.remove()" class="fa fa-times-circle fa-2x pointer close"></b>
           <div ng-show="uploader.isHtml5" data-image-thumb="item.file" class="thumbs" data-width="100"></div>
           {{item.file.name}}
       </div>
   </div>
   <input type="file" data-uploade-source="flash" settings="uplode1" result="uploader"/>
   <div id="all">{{uploader.allUploded}}</div>
   <div class="uplode_list">
       <table>
           <tr ng-repeat="item in uploader.queue" class="sort" id="{{item.unicid}}" data-drag-sort="item">
               <td class="uplode-item">
                   <div ng-show="uploader.isHtml5" data-image-thumb="item.file" class="thumbs" data-width="100"></div>
                       {{item.file.name}}
               </td>
               <td ng-show="item.file.size">{{item.mbSize}} мб.</td>
               <td ng-show="uploader.isHtml5">
                   <div class="progress-bar">
                       <span style="width: {{item.progress}}%"></span>
                   </div>
               </td>
               <td>
                   <span class="{{item.isUploaded ? 'good fa fa-check fa-2x' : 'loading'}}"></span>
               </td>
               <td>
                   <b ng-click="item.remove()" class="fa fa-times-circle fa-2x pointer close"></b>
               </td>
           </tr>
       </table>
   </div>