Das hochladen einer Datei mit AngularJS und bluimp auf Erfolgs-callback von einem anderen Formular
Ich habe den folgende tutorial zur Integration der berüchtigten bluimp jQuery file uploader in meinem AngularJS-Projekt.
Nach einigen Recherchen fand ich, dass im Optionen-array, witihn die jquery.fileuploader.js Datei gibt es eine option namens autoUpload, die, wenn auf true festgelegt hochladen der Datei automatisch.
Ich habe versucht, es zu deaktivieren(false, undefined), aber schnell lernte ich, dass diese bewirkt, dass der upload nicht zu funktionieren, auch nicht auf dem Formular Absenden.
Ich brauche löst den upload manuell, also in ein anderes callback, oder durch eine click-Ereignis.
kann das sein getan?.
code:
app.directive("fileupload", function() {
return {
restrict: "A",
scope: {
done: "&",
progress: "&",
fail: "&",
uploadurl: "=",
customdata: "&"
},
link: function(scope, elem, attrs) {
var uploadOptions;
uploadOptions = {
url: scope.uploadurl,
dataType: "json"
};
if (scope.done) {
uploadOptions.done = function(e, data) {
return scope.$apply(function() {
return scope.done({
e: e,
data: data
});
});
};
}
if (scope.fail) {
uploadOptions.fail = function(e, data) {
return scope.$apply(function() {
return scope.fail({
e: e,
data: data
});
});
};
}
if (scope.progress) {
uploadOptions.progress = function(e, data) {
return scope.$apply(function() {
return scope.progress({
e: e,
data: data
});
});
};
}
return elem.fileupload(uploadOptions).bind("fileuploadsubmit", function(e, data) {
return data.formData = {
JSON.stringify(scope.customdata())
};
});
}
};
});
app.service('uploadService', function(authService) {
var initializeFn, processFn;
initializeFn = function(e, data, process) {
var upload;
return upload = {
message: '',
uploadurl: authService.getBaseUrl() + '/applications/',
status: false
};
};
processFn = function(e, data, process) {
var file, upload;
upload = {};
upload.successData = [];
upload.status = true;
upload.error = false;
if (process === 'done') {
upload.message = data.result.result;
console.log(data);
file = data.result.resume;
upload.successData = {
//name: file.name,
//fullUrl: file.url,
//thumbUrl: file.thumbnail_url
};
} else if (process === 'progress') {
upload.message = 'Uploading....!!!';
} else {
upload.error = true;
upload.message = 'Please try again';
console.log(e, data);
}
return upload;
};
return {
process: processFn,
initialize: initializeFn
};
});
app.controller('applyCtrl', function($scope, $routeParams, uploadService){
$scope.model.formData = {};
$scope.model.formData.job = $routeParams.jobId;
$scope.uploadLayer = function(e, data, process) {
return $scope.uploadReturn = uploadService.process(e, data, process);
};
$scope.customData = function() {
return $scope.model.formData;
};
return $scope.uploadReturn = uploadService.initialize();
});
anzeigen:
<form class="applyForm" ng-submit="uploadLayer(e, data, 'progress')">
<fieldset>
<div class="formLine">
<div class="wideFieldContainer">
<input id="testUpload" type="file" fileupload customdata="customData()" name="resume" uploadurl="uploadReturn.uploadurl" done="uploadLayer(e, data, 'done')" fail="uploadLayer(e, data, 'fail')" progress="uploadLayer(e, data, 'progress')" />
</div>
</div>
</fieldset>
</form>
scripts laden um:
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="lib/bluimp/js/vendor/jquery.ui.widget.js"></script>
<script src="lib/bluimp/js/jquery.piframe-transport.js"></script>
<script src="lib/bluimp/js/jquery.fileupload.js"></script>
</body>
</html>
InformationsquelleAutor Oleg Belousov | 2013-08-26
Du musst angemeldet sein, um einen Kommentar abzugeben.
Blueimp hat eine AngularJS-version von jQuery Datei-Upload zur Verfügung.
Enthält es eine
fileUpload
- Richtlinie und eineFileUploadController
mit einemsubmit()
Methode, die Sie aufrufen können manuell.Können Sie sehen, eine funktionierende version zu http://blueimp.github.io/jQuery-File-Upload/angularjs.html.
Eine Sache, die Sie achten sollten: stellen Sie sicher, laden Sie alle .js-Dateien aus dem Beispiel in der richtigen Reihenfolge, um Probleme zu vermeiden (vgl. Quelle des Beispiel-Seite).
Hoffe, das hilft!
AKTUALISIEREN, NACHDEM SIE IHREN KOMMENTAR:
Wenn mit dem AngularJS-version der jQuery-Datei Hochladen, erstellen Sie ein Formular-tag mit den
file-upload
- Attribut wie dieses:Dann in Ihrem controller, den Sie zuweisen können die Optionen für die jQuery Datei-Upload wie diese:
Zuordnen können Sie die
submit()
- handler, um alleng-click
Attribut, solange es in der form (und damit Zugriff auf die Methode).Lassen Sie mich wissen, wenn Sie weitere Hilfe benötigen...
EXTRA BEISPIELCODE FÜR DEN ERFOLG-RÜCKRUF:
Wenn Sie brauchen, um eine Rückruffunktion auszuführen, nachdem alle uploads abgeschlossen sind, können Sie hören, die
fileuploadstop
Ereignis, das übertragen von Blueimp:Hoffe, das hilft!
Gut, es funktioniert nicht mit meinem existierenden code, bleibt mir keine andere Wahl, als die schwerere vollständige version des up loader, die ich herausgefunden, indem ich mich vor diese Frage zu stellen. Bitte nehmen Sie sich einen moment Zeit zu beobachten, den code und die Anweisung in dem link enthalten ist, die in meiner Frage. Danke für Sie Zeit & Hilfe
Die AngularJS-version von jQuery Datei-Upload enthält alle Richtlinien und Steuerungen, die Sie benötigen, um das Beispiel zu arbeiten. Sehen Sie eine Fehlermeldung, wenn Sie versuchen, Sie auszuführen? Können Sie erstellen eine plnkr, damit wir es Bearbeiten können? Danke!
Ich fügte hinzu, zusätzliche Eingabefelder in das Formular in der plnkr: plnkr.co/Bearbeiten/VAlEaR?p=Album Vorhören. Sie können dort beliebige Daten (input, auswählen, etc). Es versendet wird als POST-param-zusammen mit dem Datei-uploads. Vielen Dank für das abonnieren meines Blogs!
Blueimp Namen
files[]
weil das Beispiel richtet sich an ein PHP-backend akzeptieren kann, hochladen von mehreren Dateien gleichzeitig. Sie können es umbenennen, umattachment
und deaktivieren Sie mehrere uploads in den Optionen. Keine Notwendigkeit, ändern Sie die Kopfzeilen. Als für den Rückruf will ich hinzufügen, zusätzliche Beispiel-code zu meiner ursprünglichen Antwort...InformationsquelleAutor jvandemo