수정 (2019 년 10 월) :
6 년이 지난 지금도 jQuery 파일 업로드는 여전히 사람들을 미치게 만들고 있습니다. 여기에 대한 답변에서 약간의 위안을 찾고 있다면 NPM 에서 현대적인 대안을 찾아 보십시오 . 번거로울 가치가 없습니다. 약속합니다.이전 편집에서 Uploadify를 권장했지만 댓글 작성자가 지적했듯이 더 이상 무료 버전을 제공하지 않는 것 같습니다. Uploadify이었다 그래서 어쨌든 2013.
편집하다:
여전히 교통 체증이있는 것 같아서 제가 뭘했는지 설명하겠습니다. 결국 수락 된 답변의 자습서를 따라 플러그인이 작동했습니다. 그러나 jQuery 파일 업로드는 정말 번거롭고 더 간단한 파일 업로드 플러그인을 찾고 있다면 Uploadify를 적극 권장 합니다. 답변에서 지적했듯이 비상업적 용도로만 무료입니다.배경
사용자가 파일을 업로드 할 수 있도록 blueimp의 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
좋은 질문 형식입니다. 조직을 만나서 반갑습니다.
—
jdero
콘솔에서 오류 줄 바로 앞에 'e'와 '데이터'를 인쇄합니다. 값은 무엇입니까?
—
john 4d5 2013-08-02
Uploadi fy 는 MIT 라이선스입니다. 예를 들어 완전히 무료입니다. 그러나 동일한 개발 / 웹 사이트 의 Uploadi Five 는 사용량에 따라 $ 5- $ 100입니다
—
MartinJH 2015 년
2 년 동안 jQuery-File-Upload 문서는 더 나아지지 않았습니다. 아아.
—
Chuck Le Butt
@MartinJH 언젠가는 uploadify가 있었을 수 있지만 현재로서는 유료 uploadiFive 버전이 하나뿐입니다. 그리고 데모도 없습니다. 비디오 일뿐입니다. 불쌍한 형태.
—
Steve Horvath