แก้ไข (ต.ค. 2019):
6 ปีต่อมาและการอัปโหลดไฟล์ jQuery ยังคงทำให้ผู้คนคลั่งไคล้ หากคุณพบคำตอบเพียงเล็กน้อยที่นี่ลองค้นหา NPMสำหรับทางเลือกที่ทันสมัย ไม่คุ้มกับความยุ่งยากฉันสัญญาฉันแนะนำให้อัปโหลดในการแก้ไขครั้งก่อน แต่ตามที่ผู้แสดงความคิดเห็นชี้ให้เห็นว่าพวกเขาไม่ได้เสนอเวอร์ชันฟรีอีกต่อไป Uploadify เป็นดังนั้น 2013 อยู่แล้ว
แก้ไข:
ดูเหมือนว่าจะยังคงมีปริมาณการใช้งานอยู่ดังนั้นฉันจะอธิบายสิ่งที่ฉันทำ ในที่สุดฉันก็ทำให้ปลั๊กอินทำงานได้โดยทำตามบทช่วยสอนในคำตอบที่ยอมรับ อย่างไรก็ตาม jQuery อัพโหลดไฟล์เป็นจริงยุ่งยากและถ้าคุณกำลังมองหาปลั๊กอินอัปโหลดไฟล์ง่ายฉันอยากจะแนะนำUploadify ตามคำตอบที่ชี้ให้เห็นว่าฟรีสำหรับการใช้งานที่ไม่ใช่เชิงพาณิชย์เท่านั้นพื้นหลัง
ฉันพยายามใช้jQuery File Uploadของ blueimp เพื่อให้ผู้ใช้อัพโหลดไฟล์ได้ มันทำงานได้อย่างสมบูรณ์แบบทันทีโดยทำตามคำแนะนำในการตั้งค่า แต่เพื่อใช้งานได้จริงบนเว็บไซต์ของฉันฉันต้องการที่จะสามารถทำสองสิ่ง:
- รวมผู้อัปโหลดไว้ในหน้าเว็บที่มีอยู่ของฉัน
- เปลี่ยนไดเร็กทอรีสำหรับไฟล์ที่อัปโหลด
ไฟล์ทั้งหมดสำหรับปลั๊กอินจะอยู่ในโฟลเดอร์ใต้รูท
ฉันพยายามแล้ว...
- การย้ายเพจสาธิตไปยังรูทและอัพเดตพา ธ สำหรับสคริปต์ที่จำเป็น
- เปลี่ยน 'upload_dir' และ 'upload_url' ตัวเลือกในแฟ้ม UploadHandler.php เป็นข้อเสนอแนะที่นี่
- การเปลี่ยน 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
รูปแบบคำถามที่ดี ยินดีที่ได้เห็นองค์กร
—
jdero
พิมพ์ 'e' และ 'data' ในคอนโซลก่อนบรรทัดข้อผิดพลาดค่าคืออะไร?
—
john 4d5
Uploadi fyเป็นใบอนุญาตของ MIT เช่นฟรี อย่างไรก็ตาม Uploadi Fiveจากdev / เว็บไซต์เดียวกันคือ $ 5- $ 100 ขึ้นอยู่กับการใช้งาน
—
MartinJH
ในสองปีเอกสาร jQuery-File-Upload ไม่ได้ดีไปกว่านี้ โอ๊ะ
—
Chuck Le Butt
@MartinJH อาจมีการอัปโหลดในบางจุด แต่ ณ ตอนนี้มีเพียงเวอร์ชันเดียวเท่านั้น - เวอร์ชันอัปโหลดแบบชำระเงิน และไม่มีการสาธิตด้วย มันเป็นเพียงวิดีโอ ฟอร์มแย่.
—
Steve Horvath