EDIT (ottobre 2019):
6 anni dopo e jQuery File Upload sta chiaramente ancora facendo impazzire la gente. Se trovi poco conforto nelle risposte qui, prova una ricerca di NPM per un'alternativa moderna. Non vale la pena, lo prometto.Ho consigliato Uploadify nella modifica precedente ma, come ha sottolineato un commentatore, non sembrano più offrire una versione gratuita. Uploadify era così nel 2013 comunque.
MODIFICARE:
Sembra che stia ancora ricevendo traffico, quindi ti spiego cosa ho finito per fare. Alla fine ho fatto funzionare il plugin seguendo il tutorial nella risposta accettata. Tuttavia, il caricamento di file jQuery è una vera seccatura e se stai cercando un plug-in per il caricamento di file più semplice, consiglio vivamente Uploadify . Come una risposta ha sottolineato, è gratuito solo per uso non commerciale.sfondo
Sto cercando di utilizzare il caricamento di file jQuery di blueimp per consentire agli utenti di caricare file. Fuori dalla scatola funziona perfettamente , seguendo le istruzioni di installazione. Ma per usarlo praticamente sul mio sito web, voglio essere in grado di fare un paio di cose:
- Includi l'uploader su una qualsiasi delle mie pagine esistenti
- Cambia la directory per i file caricati
Tutti i file per il plugin si trovano in una cartella sotto la radice.
Ho provato...
- Spostare la pagina demo nella root e aggiornare i percorsi per gli script necessari
- Modifica delle opzioni "upload_dir" e "upload_url" nel file UploadHandler.php come suggerito qui .
- Modifica dell'URL nella seconda riga del javascript demo
In tutti i casi, gli spettacoli in anteprima, e le piste barra di avanzamento, ma i file non riescono a caricare, e ottengo questo errore nella console: Uncaught TypeError: Cannot read property 'files' of undefined. Non capisco come funzionano tutte le parti del plugin, il che rende difficile il debug.
Codice
Il javascript nella pagina demo:
$(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');
});Sono sorpreso dalla mancanza di documentazione; sembra che dovrebbe essere una cosa semplice da cambiare. Apprezzerei se qualcuno potesse spiegare come farlo.
10
Buon formato della domanda. Bello vedere l'organizzazione.
—
jdero
stampa "e" e "dati" nella console subito prima della riga di errore, quali sono i valori?
—
giovanni 4d5
Uploadi fy è una licenza MIT, ad esempio è completamente gratuito. Tuttavia, Uploadi Five dallo stesso dev / sito web costa $ 5- $ 100 a seconda dell'utilizzo
—
MartinJH,
In due anni la documentazione di jQuery-File-Upload non è migliorata. Argh.
—
Chuck Le Butt
@MartinJH potrebbe esserci stato un uploadify a un certo punto, ma per ora ce n'è solo uno: la versione a pagamento uploadiFive. E non c'è neanche una demo; è solo un video. Forma scadente.
—
Steve Horvath