Dateien mit UPLOAD() und Fortschritt hochladen

jComponent 20 · jcomponent@20 jcomponentfrontenduploadfiles Mit jComponent 20 ausgeführt

UPLOAD('POST /url/', formdata, callback, onprogress) sendet ein FormData (die Adresse beginnt mit der HTTP-Methode, wie bei AJAX()) und ruft den Callback mit der geparsten Antwort auf. Das optionale vierte Argument erhält den Prozentwert, während der Upload läuft. Baue das FormData aus einem Datei-Input (new FormData() und append('file', input.files[0])); die Serverseite ist die @upload-Route aus dem Rezept zum Datei-Upload.

controllers/upload.js

exports.install = function() {
	ROUTE('POST /upload/ @upload <5mb', upload);
};

function upload($) {

	var file = $.files[0];

	file.read(function(err, buffer) {
		$.json({ filename: file.filename, text: buffer.toString('utf8'), title: $.body.title });
	});
}

public/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<script>

		var form = new FormData();
		form.append('title', 'My note');
		form.append('file', new Blob(['hello from the browser'], { type: 'text/plain' }), 'note.txt');

		var progress = [];

		UPLOAD('POST /upload/', form, function(response) {
			SET('uploaded', response);
		}, function(percentage) {
			progress.push(percentage);
		});

	</script>

</body>
</html>

Probiere es in deinem Browser aus

Bearbeite das Beispiel und führe es aus. Es läuft in einem isolierten Frame in deinem Browser; nichts wird an unseren Server gesendet.

Code

Vorschau