switch ngswitch example angularjs node.js sails.js multifile-uploader

angularjs - example - ngswitch angular 4



Sube mĂșltiples archivos en angular (3)

Tengo una situación en la que tengo una forma en la que tengo una fila donde tengo dos entradas de campos de texto y tengo que subir un archivo para esa fila y este tipo de filas pueden ser ''N'' y luego es un archivo maestro que se puede ingresar para todo el formulario mientras que estos son parte del formulario y debo enviar todos estos archivos de una vez al hacer clic en el botón Guardar.

Estoy un poco atascado con ng-upload, necesita una llamada a la API, y realmente no puedo tener más de una llamada de la API para este formulario. El código html de muestra se encuentra a continuación:

<!DOCTYPE html> <html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <form editable-form name="xyzForm" ng-submit="create(model)"> <label>Tags: </label><input class="col-xs-12 col-md-12" ng-model="model.tags" type="text" name="Tags"> <label>Notes: </label> <input class="col-xs-12 col-md-11" ng-model="model.notes" type="text" name="notes"> <table class=" col-xs-3 col-md-11 table" border="1px solid red;"> <thead> <tr> <th>Product</th> <th>Manufacturer</th> <th>Location</th> <th>Specification</th> <th></th> </tr> </thead> <tbody> <tr ng-repeat="itemRow in item.singleItem"> <td><input type="text" class="xdTextBox" name="itemRow.name" ng-model="model.itemRow[$index].name" /></td> <td><input type="text" class="xdTextBox" name="itemRow.manufacturer" ng-model="model.itemRow[$index].manufacturer" /></td> <td><input type="text" class="xdTextBox" name="itemRow.location" ng-model="model.itemRow[$index].location" /></td> <td><i class="pull-left glyphicon glyphicon-upload"><input type="file" name="itemRow.doc" ng-model="model.itemRow[$index].doc" multiple=false></i></td> <td><i class="pull-left glyphicon glyphicon-remove"></i></td> </tr> </tbody> </span> </table> <label>Product Spec: </label><input type="file" ng-model="prefabdoc" multiple="true" ngf-maxsize="15000000" /> </form> </body> </html>


Aquí está el ejemplo de la directiva de enlace de valor de archivo ...

http://plnkr.co/edit/B13t84j5IPzINMh1F862?p=preview

El código de Js es:

var app = angular.module(''myApp'', []); app.controller(''MainCtrl'', function($scope) { $scope.name = ''World''; $scope.files = []; $scope.upload=function(){ alert($scope.files.length+" files selected ... Write your Upload Code"); }; }); app.directive(''ngFileModel'', [''$parse'', function ($parse) { return { restrict: ''A'', link: function (scope, element, attrs) { var model = $parse(attrs.ngFileModel); var isMultiple = attrs.multiple; var modelSetter = model.assign; element.bind(''change'', function () { var values = []; angular.forEach(element[0].files, function (item) { var value = { // File Name name: item.name, //File Size size: item.size, //File URL to view url: URL.createObjectURL(item), // File Input Value _file: item }; values.push(value); }); scope.$apply(function () { if (isMultiple) { modelSetter(scope, values); } else { modelSetter(scope, values[0]); } }); }); } }; }]);

El código HTML es:

<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write(''<base href="'' + document.location + ''" />'');</script> <link href="style.css" rel="stylesheet" /> <script data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js" data-require="[email protected]"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <p>Hello {{name}}!</p> <input type="file" ng-file-model="files" multiple /> <button type="button" ng-click="upload()">Upload</button> <p ng-repeat="file in files"> {{file.name}} </p> </body> </html>


Si no te importan los navegadores menos que IE 9. Luego puedes seguir esta publicación y construir un objeto FormData en tu evento ng-submit. Esto creará un formulario / multiparte y puede que no sea lo que está buscando pero hace el truco.


respuesta de anterior, hay un pequeño cambio para que el código funcione.

var modelSetter = model.assign; element.bind(''change'', function () { var values = []; angular.forEach(element[0].files, function (item) { var value = {... } } }

la matriz var debe definirse arriba antes de la función forEach

var modelSetter = model.assign; element.bind(''change'', function () { var values = []; angular.forEach(element[0].files, function (item) { var value = {... } } }