blueimp/jQuery-File-Upload 플러그인을 사용하여 프로그래밍 방식으로 동일한 양식을 통해 둘 이상의 파일 입력 필드를 보내려고합니다.여러 파일 입력 필드를 프로그래밍 방식으로 하나의 양식으로 보내기
사용자가 양식 파일을 선택하면 양식 변수에 $('#form').fileupload('send') 메소드를 추가로 전송하기 위해 양식 변수를 JS 변수에 추가하기 만하면됩니다. 내 목표는 이전에 비동기 방식으로 사용했던 정확히 동일한 동기 양식을 사용하는 것입니다. 따라서 사용자가 양식 제출 버튼을 클릭하면 기본 작업을하지 못하며 플러그인이 작업을 수행하고 모든 양식 데이터를 전송하며 전반적인 업로드 진행 상황을 표시합니다.
- https://github.com/blueimp/jQuery-File-Upload/wiki/API 은 사실 거의 일하고 있지만 서버 끝에 하나 개 이상의 입력 파일을 전송하지 않습니다
나는 주로이 가이드를 따라하고 있습니다. fileuploadadd 이벤트에서 (내 파일 입력은 하나의 파일 만 있지만 각기 다른 accept 속성을 사용합니다) uploadable 배열로 data.files[0]을 푸시합니다. 양식 제출시 $('#form').fileupload('send', {files: uploadable})과 같은 것을 사용합니다.
양식 데이터와 함께 하나의 파일 만 전송되기 때문에 올바른 방법이 아닙니다. 단일 양식을 사용하여 프로그래밍 방식으로 둘 이상의 파일 입력 파일을 보내는 올바른 방법은 무엇입니까?
전반적인 업로드 진행 상태에 대해 너무 확신하지 않습니다 ... fileuploadprogressall 이벤트를 사용하여 업로드 진행률을 읽으면 업로드 된 모든 파일의 진행 상황을보고합니까? 첫 번째 파일을 밀어 JS가 (간체)
$(function() {
var uploadable = [];
$('#form').fileupload({
autoUpload: false,
singleFileUploads: false,
add: function (event, data) {
uploadable.push(data.files[0]);
return false;
},
// other event callbacks
})
.prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
$('#form').submit(function (event) {
event.preventDefault();
$('#form').fileupload('send', {files: uploadable});
});
});
HTML은
<form id="form" action="upload" method="post" enctype="multipart/form-data">
<!-- other text/hidden inputs that will also be sent -->
<input type="file" name="image" id="image" accept="image/*" />
<input type="file" name="video" id="video" accept="video/*" />
</form>
당신이 솔루션을 얻을 않았다 주셔서 감사합니다? –