EDIT :
Cela semble toujours attirer du trafic, alors je vais expliquer ce que j'ai fini par faire. J'ai finalement réussi à faire fonctionner le plugin en suivant le tutoriel de Subrat, qui est la réponse acceptée. Cependant, jQuery File Upload est un véritable casse-tête et si vous cherchez un plugin simple pour le téléchargement de fichiers, je vous recommande vivement de suivre les conseils suivants Uploadify (merci CORSAIR !). Comme une réponse l'a souligné, il n'est gratuit que pour une utilisation non commerciale.
Contexte
J'essaie d'utiliser la méthode de Blueimp. jQuery File Upload pour permettre aux utilisateurs de télécharger des fichiers. Hors de la boîte, il fonctionne parfaitement en suivant les instructions d'installation. Mais pour l'utiliser de manière pratique sur mon site web, je veux pouvoir faire quelques choses :
- Inclure l'uploader sur n'importe laquelle de mes pages existantes
- Changez le répertoire pour les fichiers téléchargés
Tous les fichiers du plugin sont situés dans un dossier sous la racine.
J'ai essayé...
- Déplacement de la page de démonstration dans le Root et mise à jour des chemins pour les scripts nécessaires
- Modifier les options 'upload_dir' et 'upload_url' dans le fichier UploadHandler.php comme suggéré. ici .
- Changer l'url dans la deuxième ligne du javascript de la démo
Dans tous les cas, l'aperçu s'affiche et la barre de progression s'exécute, mais le téléchargement des fichiers échoue et j'obtiens cette erreur dans 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 vraiment que quelqu'un puisse m'expliquer comment faire.
