Téléverser des fichiers avec UPLOAD() et la progression

jComponent 20 · jcomponent@20 jcomponentfrontenduploadfiles Exécutée avec jComponent 20

UPLOAD('POST /url/', formdata, callback, onprogress) envoie un FormData (l'adresse commence par la méthode HTTP, comme dans AJAX()) et appelle le callback avec la réponse analysée. Le quatrième argument facultatif reçoit le pourcentage pendant le téléversement. Construisez le FormData à partir d'un champ fichier (new FormData() et append('file', input.files[0])) ; le côté serveur est la route @upload de la recette sur le téléversement de fichiers.

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>

Essayez-le dans votre navigateur

Modifiez l'exemple et exécutez-le. Il s'exécute dans un cadre isolé de votre navigateur ; rien n'est envoyé à notre serveur.

Code

Aperçu