EDITAR (Oct 2019):
6 años después, jQuery File Upload claramente todavía está volviendo loca a la gente. Si encuentra poco consuelo en las respuestas aquí, intente una búsqueda de NPM para una alternativa moderna. No vale la pena la molestia, lo prometo.Recomendé Uploadify en la edición anterior pero, como señaló un comentarista, ya no parecen ofrecer una versión gratuita. Uploadify fue tan 2013 de todos modos.
EDITAR:
Esto todavía parece estar recibiendo tráfico, así que explicaré lo que terminé haciendo. Finalmente logré que el complemento funcionara siguiendo el tutorial en la respuesta aceptada. Sin embargo, la carga de archivos jQuery es una verdadera molestia y si está buscando un complemento de carga de archivos más simple, le recomendaría encarecidamente Uploadify . Como se señaló en la respuesta, solo es gratuito para uso no comercial.Antecedentes
Estoy tratando de usar la carga de archivos jQuery de blueimp para permitir que los usuarios carguen archivos. Fuera de la caja, funciona perfectamente , siguiendo las instrucciones de configuración. Pero para usarlo prácticamente en mi sitio web, quiero poder hacer un par de cosas:
- Incluir al usuario que subió el video en cualquiera de mis páginas existentes
- Cambiar el directorio de archivos cargados
Todos los archivos del complemento se encuentran en una carpeta debajo de la raíz.
He intentado...
- Mover la página de demostración a la raíz y actualizar las rutas de los scripts necesarios
- Cambiar las opciones "upload_dir" y "upload_url" en el archivo UploadHandler.php como se sugiere aquí .
- Cambiar la URL en la segunda línea del javascript de demostración
En todos los casos, los espectáculos de vista previa, y se ejecuta la barra de progreso, pero los archivos no pueden cargar y me sale este error en la consola: Uncaught TypeError: Cannot read property 'files' of undefined. No entiendo cómo funcionan todas las partes del complemento, lo que dificulta la depuración.
Código
El javascript en la página de demostración:
$(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');
});Me sorprende la falta de documentación; parece que debería ser algo sencillo de cambiar. Le agradecería que alguien me explicara cómo hacer esto.
10
Buen formato de pregunta. Es bueno ver la organización.
—
jdero
imprima 'e' y 'datos' en la consola justo antes de la línea de error, ¿cuáles son los valores?
—
juan 4d5
Uploadi fy es una licencia MIT, por ejemplo, es completamente gratis. Sin embargo, Uploadi Five del mismo desarrollador / sitio web cuesta $ 5- $ 100 dependiendo del uso
—
MartinJH
En dos años, la documentación de jQuery-File-Upload no ha mejorado. Argh.
—
Chuck Le Butt
@MartinJH puede haber habido una carga en algún momento, pero a partir de ahora solo hay una: la versión de pago uploadiFive. Y tampoco hay demostración; es solo un video. Mala forma.
—
Steve Horvath