EDIT (tháng 10 năm 2019):
6 năm sau và Tải lên tệp jQuery rõ ràng vẫn đang khiến mọi người phát điên. Nếu bạn đang tìm thấy một chút an ủi trong các câu trả lời ở đây, hãy thử tìm kiếm NPM cho một giải pháp thay thế hiện đại. Nó không đáng để làm phiền, tôi hứa.Tôi đã khuyến nghị Uploadify trong lần chỉnh sửa trước nhưng, như một nhà bình luận đã chỉ ra, họ không còn xuất hiện để cung cấp một phiên bản miễn phí. Uploadify là như vậy 2013 dù sao.
BIÊN TẬP:
Điều này dường như vẫn nhận được lưu lượng truy cập vì vậy tôi sẽ giải thích những gì tôi đã làm. Cuối cùng tôi đã có plugin hoạt động bằng cách làm theo hướng dẫn trong câu trả lời được chấp nhận. Tuy nhiên, Tải lên tệp jQuery là một rắc rối thực sự và nếu bạn đang tìm kiếm một plugin tải lên tệp đơn giản hơn, tôi rất khuyến nghị Uploadify . Như một câu trả lời đã chỉ ra, nó chỉ miễn phí cho sử dụng phi thương mại.Lý lịch
Tôi đang cố gắng sử dụng Tải lên tệp jQuery của blueimp để cho phép người dùng tải lên các tệp. Ra khỏi hộp nó hoạt động hoàn hảo , làm theo các hướng dẫn thiết lập. Nhưng để sử dụng nó thực tế trên trang web của tôi, tôi muốn có thể làm một vài điều:
- Bao gồm trình tải lên trên bất kỳ trang nào hiện có của tôi
- Thay đổi thư mục cho các tập tin tải lên
Tất cả các tệp cho plugin được đặt trong một thư mục dưới thư mục gốc.
Tôi đã thử ...
- Di chuyển trang demo vào thư mục gốc và cập nhật các đường dẫn cho các tập lệnh cần thiết
- Thay đổi tùy chọn 'upload_dir' và 'upload_url' trong tệp UploadHandler.php như được đề xuất ở đây .
- Thay đổi URL trong dòng thứ hai của javascript demo
Trong mọi trường hợp, phần xem trước hiển thị và thanh tiến trình chạy, nhưng các tệp không tải lên được và tôi gặp lỗi này trong bảng điều khiển : Uncaught TypeError: Cannot read property 'files' of undefined. Tôi không hiểu làm thế nào tất cả các phần của plugin hoạt động gây khó khăn cho việc gỡ lỗi.
Mã
Các javascript trong trang 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');
});Tôi ngạc nhiên vì thiếu tài liệu; Có vẻ như đó là một điều đơn giản để thay đổi. Tôi sẽ đánh giá cao nếu ai đó có thể giải thích làm thế nào để làm điều này.
10
Định dạng câu hỏi hay. Rất vui khi thấy tổ chức.
—
jdero
in 'e' và 'dữ liệu' trong bảng điều khiển ngay trước dòng lỗi, các giá trị là gì?
—
john 4d5
Uploadi fy là giấy phép MIT, ví dụ như nó hoàn toàn miễn phí. Tuy nhiên, Uploadi Five từ cùng một nhà phát triển / trang web là $ 5- $ 100 tùy theo cách sử dụng
—
MartinJH
Trong hai năm, tài liệu jQuery-File-Upload không thể tốt hơn được nữa. Argh.
—
Chuck Le Mông
@MartinJH có thể đã có một lượt tải lên tại một số điểm, nhưng cho đến nay chỉ có một - phiên bản uploadiFive trả phí. Và cũng không có bản demo nào; đó chỉ là một video. Hình thức kém.
—
Steve Horvath