DÜZENLEME (Ekim 2019):
6 yıl sonra ve jQuery Dosya Yükleme açıkça hala insanları çıldırtıyor. Buradaki cevaplarda biraz teselli buluyorsanız, modern bir alternatif için NPM araştırmasını deneyin . Uğraşmaya değmez, söz veriyorum.Önceki düzenlemede Uploadify'ı tavsiye ettim ancak bir yorumcunun da belirttiği gibi artık ücretsiz bir sürüm sunmuyorlar. Uploadify oldu böylece yine 2013.
DÜZENLE:
Bu hala trafik alıyor gibi görünüyor, bu yüzden ne yaptığımı açıklayacağım. Sonunda, kabul edilen cevaptaki öğreticiyi izleyerek eklentiyi çalıştırdım. Ancak, jQuery Dosya Yükleme gerçek bir güçlüktür ve daha basit bir dosya yükleme eklentisi arıyorsanız, Uploadify'ı şiddetle tavsiye ederim . Bir yanıtın işaret ettiği gibi, yalnızca ticari olmayan kullanım için ücretsizdir.Arka fon
Kullanıcıların dosya yüklemesine izin vermek için blueimp'in jQuery Dosya Yüklemesini kullanmaya çalışıyorum . Kurulum talimatlarını izleyerek kutudan çıkar çıkmaz mükemmel çalışır . Ancak web sitemde pratik olarak kullanmak için birkaç şey yapabilmek istiyorum:
- Yükleyiciyi mevcut sayfalarımdan herhangi birine dahil et
- Yüklenen dosyalar için dizini değiştirin
Eklentinin tüm dosyaları, kökün altındaki bir klasörde bulunur.
Denedim...
- Demo sayfasını köke taşımak ve gerekli komut dosyaları için yolları güncellemek
- UploadHandler.php dosyasındaki 'upload_dir' ve 'upload_url' seçeneklerini burada önerildiği gibi değiştirmek .
- Demo javascript'inin ikinci satırındaki URL'yi değiştirme
Her durumda, önizleme gösterileri ve ilerleme çubuğu çalışır, ancak dosyalar yüklemek için başarısız ve ben konsolda bu hatayı alıyorum: Uncaught TypeError: Cannot read property 'files' of undefined. Eklentinin tüm bölümlerinin nasıl çalıştığını anlamıyorum, bu da hata ayıklamayı zorlaştırıyor.
kod
Demo sayfasındaki javascript:
$(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');
});Belge eksikliği beni şaşırttı; Görünüşe göre değiştirilmesi basit bir şey olmalı. Biri bunun nasıl yapılacağını açıklayabilirse minnettar olurum.
10
İyi soru formatı. Organizasyon görmek güzel.
—
jdero
Hata satırından hemen önce konsolda 'e' ve 'veri' yazdırın, değerler nelerdir?
—
john 4d5
Uploadi fy MIT lisansıdır, örneğin tamamen ücretsizdir. Bununla birlikte, aynı geliştirici / web sitesinden Uploadi Five , kullanıma bağlı olarak
—
5-100
İki yıl içinde jQuery-File-Upload belgeleri daha iyi hale gelmedi. Ahh.
—
Chuck Le Butt
@MartinJH bir noktada bir yükleme olmuş olabilir, ancak şu an itibariyle sadece bir tane var - ücretli yükleme iFive sürümü. Ve demo da yok; bu sadece bir video. Kötü form.
—
Steve Horvath