EDIT (अक्टूबर 2019):
6 साल बाद और jQuery फ़ाइल अपलोड स्पष्ट रूप से अभी भी लोगों को पागल कर रहा है। यदि आप यहां जवाबों में थोड़ा सांत्वना पा रहे हैं, तो आधुनिक विकल्प के लिए एनपीएम की खोज करें । यह परेशानी के लायक नहीं है, मैं वादा करता हूं।मैंने पिछले संपादन में Uploadify की सिफारिश की, लेकिन एक टिप्पणीकार के रूप में, वे अब मुफ्त संस्करण की पेशकश नहीं करते हैं। अपलोड तो वैसे भी 2013 था ।
संपादित करें:
यह अभी भी यातायात हो रहा है तो मैं समझाता हूं कि मैंने क्या किया। मुझे अंततः स्वीकृत उत्तर में ट्यूटोरियल का अनुसरण करके प्लगइन काम कर रहा है। हालांकि, jQuery फाइल अपलोड एक असली परेशानी है और आप एक सरल फ़ाइल अपलोड प्लगइन के लिए देख रहे हैं, मैं अत्यधिक की सिफारिश करेंगे Uploadify । एक उत्तर के रूप में, यह केवल गैर-व्यावसायिक उपयोग के लिए स्वतंत्र है।पृष्ठभूमि
मैं उपयोगकर्ताओं को फ़ाइलों को अपलोड करने की अनुमति देने के लिए ब्लिंप के jQuery फ़ाइल अपलोड का उपयोग करने का प्रयास कर रहा हूं । बॉक्स से बाहर यह पूरी तरह से काम करता है , सेटअप निर्देशों का पालन करता है। लेकिन व्यावहारिक रूप से अपनी वेबसाइट पर इसका उपयोग करने के लिए, मैं कुछ चीजों को करने में सक्षम होना चाहता हूं:
- मेरे किसी भी मौजूदा पेज पर अपलोडर शामिल करें
- अपलोड की गई फ़ाइलों के लिए निर्देशिका बदलें
प्लगइन के लिए सभी फाइलें रूट के तहत एक फ़ोल्डर में स्थित हैं।
मैंने कोशिश की...
- डेमो पेज को रूट में ले जाना और आवश्यक स्क्रिप्ट के लिए पथ अपडेट करना
- यहां सुझाए अनुसार UploadHandler.php फ़ाइल में 'upload_dir' और 'upload_url' विकल्प बदलना ।
- URL को डेमो जावास्क्रिप्ट की दूसरी पंक्ति में बदलना
सभी मामलों में, पूर्वावलोकन दिखाता है, और प्रगति बार रन है, लेकिन फाइल अपलोड करने में विफल रहते हैं, और मैं कंसोल में इस त्रुटि मिलती है: Uncaught TypeError: Cannot read property 'files' of undefined। मुझे समझ नहीं आता कि प्लगइन के सभी भाग कैसे काम करते हैं जो डिबग करना मुश्किल बना रहा है।
कोड
जावास्क्रिप्ट डेमो पृष्ठ में:
$(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');
});मैं प्रलेखन की कमी से हैरान हूं; ऐसा लगता है कि इसे बदलना एक साधारण बात होनी चाहिए। अगर कोई यह समझा सकता है कि मुझे यह कैसे करना है तो मैं सराहना करूंगा।
10
अच्छा प्रश्न प्रारूप। संगठन को देखकर अच्छा लगा।
—
जॉर्डन
त्रुटि पंक्ति से ठीक पहले कंसोल में 'e' और 'data' प्रिंट करें, मान क्या हैं?
—
जॉन 4d5
Uploadi fy एमआईटी लाइसेंस है जैसे यह पूरी तरह से मुफ्त है। हालाँकि, एक ही देव / वेबसाइट से Uploadi पाँच $ 5- $ 100 उपयोग के आधार पर है
—
मार्टिनजे
दो साल में jQuery-File-Upload प्रलेखन किसी भी बेहतर नहीं मिला है। अरे।
—
चॉक ले बट
@MartinJH कुछ बिंदु पर अपलोड हो सकता है, लेकिन अब तक केवल एक ही है - सशुल्क अपलोडीफाइव संस्करण। और कोई डेमो भी नहीं है; यह एक वीडियो है। गरीब का रूप।
—
स्टीव होर्वाथ