EDIT (octobre 2019):
6 ans plus tard, jQuery File Upload est clairement en train de rendre les gens fous. Si vous trouvez peu de réconfort dans les réponses ici, essayez une recherche de NPM pour une alternative moderne. Cela ne vaut pas la peine, je le promets.J'ai recommandé Uploadify dans l'édition précédente mais, comme l'a souligné un commentateur, ils ne semblent plus offrir une version gratuite. Uploadify était si 2013 de toute façon.
ÉDITER:
Cela semble toujours générer du trafic, alors je vais vous expliquer ce que j'ai fini par faire. J'ai finalement fait fonctionner le plugin en suivant le tutoriel dans la réponse acceptée. Cependant, jQuery File Upload est un vrai problème et si vous recherchez un plugin de téléchargement de fichiers plus simple, je vous recommande vivement Uploadify . Comme une réponse l'a souligné, il n'est gratuit que pour un usage non commercial.Contexte
J'essaie d'utiliser le téléchargement de fichiers jQuery de blueimp pour permettre aux utilisateurs de télécharger des fichiers. Hors de la boîte, il fonctionne parfaitement , en suivant les instructions de configuration. Mais pour l'utiliser pratiquement sur mon site Web, je veux pouvoir faire plusieurs choses:
- Inclure le téléchargeur sur l'une de mes pages existantes
- Changer le répertoire des fichiers téléchargés
Tous les fichiers du plugin se trouvent dans un dossier sous la racine.
J'ai essayé...
- Déplacement de la page de démonstration à la racine et mise à jour des chemins pour les scripts nécessaires
- Changer les options 'upload_dir' et 'upload_url' dans le fichier UploadHandler.php comme suggéré ici .
- Modification de l'URL dans la deuxième ligne du javascript de démonstration
Dans tous les cas, les spectacles de prévisualisation, et les pistes de barre de progression, mais les fichiers ne parviennent pas à télécharger, et je reçois cette erreur de la console: Uncaught TypeError: Cannot read property 'files' of undefined. Je ne comprends pas comment toutes les parties du plugin fonctionnent, ce qui rend le débogage difficile.
Code
Le javascript dans la page de démonstration:
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'file_upload/server/php/UploadHandler.php',
uploadButton = $('<button/>')
.addClass('btn')
.prop('disabled', true)
.text('Processing...')
.on('click', function () {
var $this = $(this),
data = $this.data();
$this
.off('click')
.text('Abort')
.on('click', function () {
$this.remove();
data.abort();
});
data.submit().always(function () {
$this.remove();
});
});
$('#fileupload').fileupload({
url: url,
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 5000000, // 5 MB
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: true
}).on('fileuploadadd', function (e, data) {
data.context = $('<div/>').appendTo('#files');
$.each(data.files, function (index, file) {
var node = $('<p/>')
.append($('<span/>').text(file.name));
if (!index) {
node
.append('<br>')
.append(uploadButton.clone(true).data(data));
}
node.appendTo(data.context);
});
}).on('fileuploadprocessalways', function (e, data) {
var index = data.index,
file = data.files[index],
node = $(data.context.children()[index]);
if (file.preview) {
node
.prepend('<br>')
.prepend(file.preview);
}
if (file.error) {
node
.append('<br>')
.append(file.error);
}
if (index + 1 === data.files.length) {
data.context.find('button')
.text('Upload')
.prop('disabled', !!data.files.error);
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
}).on('fileuploaddone', function (e, data) {
$.each(data.result.files, function (index, file) {
var link = $('<a>')
.attr('target', '_blank')
.prop('href', file.url);
$(data.context.children()[index])
.wrap(link);
});
}).on('fileuploadfail', function (e, data) {
$.each(data.result.files, function (index, file) {
var error = $('<span/>').text(file.error);
$(data.context.children()[index])
.append('<br>')
.append(error);
});
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});Je suis surpris par le manque de documentation; il semble que cela devrait être une chose simple à changer. J'apprécierais si quelqu'un pouvait expliquer comment faire cela.
10
Bon format de question. Sympa de voir l'organisation.
—
jdero
imprimer «e» et «données» dans la console juste avant la ligne d'erreur, quelles sont les valeurs?
—
john 4d5
Uploadi fy est une licence MIT, c'est-à-dire totalement gratuit. Cependant, Uploadi Five du même développeur / site Web coûte 5 à 100 $ selon l'utilisation
—
MartinJH
En deux ans, la documentation de jQuery-File-Upload ne s'est pas améliorée. Argh.
—
Chuck Le Butt
@MartinJH il y a peut-être eu un uploadify à un moment donné, mais pour le moment, il n'y en a qu'un - la version uploadiFive payante. Et il n'y a pas non plus de démo; ce n'est qu'une vidéo. Mauvaise forme.
—
Steve Horvath