EDIT (Okt 2019):
6 tahun kemudian dan Unggahan File jQuery jelas masih membuat orang gila. Jika Anda menemukan sedikit pelipur lara dalam jawabannya di sini, cobalah mencari NPM untuk alternatif modern. Ini tidak sebanding dengan kerumitannya, aku janji.Saya merekomendasikan Uploadify di edit sebelumnya tetapi, seperti yang ditunjukkan oleh seorang pemberi komentar, mereka tampaknya tidak lagi menawarkan versi gratis. Uploadify begitu tahun 2013.
EDIT:
Ini sepertinya masih mendapatkan lalu lintas jadi saya akan menjelaskan apa yang akhirnya saya lakukan. Saya akhirnya mendapatkan plugin berfungsi dengan mengikuti tutorial dalam jawaban yang diterima. Namun, jQuery File Upload benar-benar merepotkan dan jika Anda mencari plugin unggah file yang lebih sederhana, saya akan sangat merekomendasikan Uploadify . Sebagai jawaban yang ditunjukkan, ini hanya gratis untuk penggunaan non-komersial.Latar Belakang
Saya mencoba menggunakan jQuery File Upload blueimp untuk memungkinkan pengguna mengupload file. Di luar kotak itu berfungsi dengan sempurna , mengikuti instruksi pengaturan. Tetapi untuk menggunakannya secara praktis di situs web saya, saya ingin dapat melakukan beberapa hal:
- Sertakan pengunggah di salah satu halaman saya yang ada
- Ubah direktori untuk file yang diunggah
Semua file untuk plugin terletak di folder di bawah root.
Saya sudah mencoba ...
- Memindahkan halaman demo ke root dan memperbarui jalur untuk skrip yang diperlukan
- Mengubah opsi 'upload_dir' dan 'upload_url' di file UploadHandler.php seperti yang disarankan di sini .
- Mengubah URL di baris kedua dari demo javascript
Dalam semua kasus, menunjukkan pratinjau, dan progress bar berjalan, tetapi file gagal untuk meng-upload, dan saya mendapatkan error ini di konsol: Uncaught TypeError: Cannot read property 'files' of undefined. Saya tidak mengerti bagaimana semua bagian dari plugin bekerja yang membuatnya sulit untuk di-debug.
Kode
Javascript di halaman 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');
});
Saya terkejut dengan kurangnya dokumentasi; sepertinya itu adalah hal yang sederhana untuk diubah. Saya akan sangat menghargai jika seseorang dapat menjelaskan bagaimana melakukan ini.
10
Format pertanyaan yang bagus. Senang melihat organisasi.
—
jdero
cetak 'e' dan 'data' di konsol tepat sebelum baris kesalahan, apa nilainya?
—
john 4d5
Uploadi fy adalah lisensi MIT, misalnya sepenuhnya gratis. Namun, Uploadi Five dari dev / situs web yang sama adalah $ 5- $ 100 tergantung pada penggunaan
—
MartinJH
Dalam dua tahun, dokumentasi jQuery-File-Upload tidak menjadi lebih baik. Argh.
—
Chuck Le Butt
@MartinJH mungkin ada uploadify di beberapa titik, tapi sampai sekarang hanya ada satu - versi uploadiFive berbayar. Dan tidak ada demo juga; itu hanyalah sebuah video. Bentuk yang buruk.
—
Steve Horvath