jQuery와 비동기 적으로 파일을 업로드하려면 어떻게합니까?
질문
jQuery와 비동기 적으로 파일을 업로드하고 싶습니다.
$ (document). 그레이트 (함수 () { $ ( "# uploadbutton"). (함수 () { var filename = $ ( "# 파일"). val (); $ .ajax ({ 유형 : "Post", URL : "AddFile.do", enctype : 'multipart / form-data', 데이터 : { 파일 : 파일 이름 }, 성공 : 함수 () { 경고 ( "데이터 업로드 :"); } }); }); }); <스크립트 src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"> 파일 <입력 유형 = "파일"id = "파일"name = "file"size = "10"/>
파일이 업로드되는 파일 대신 파일 이름 만 발생합니다.이 문제를 해결하기 위해 무엇을 할 수 있습니까?
답변
HTML5를 사용하면 Ajax 및 jQuery로 파일 업로드를 할 수 있습니다.뿐만 아니라 파일 유효성 검사 (이름, 크기 및 MIME 형식)를 수행하거나 HTML5 진행 태그 (또는 DIV)로 진행중인 이벤트를 처리 할 수 있습니다.최근에 파일 업 로더를 만들어야했지만 플래시 나 iframe 또는 플러그인을 사용하고 싶지 않았고 일부 연구가 끝나고 솔루션을 일으켰습니다.
HTML :
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<progress></progress>
첫째, 원하는 경우 일부 유효성 검사를 수행 할 수 있습니다.예를 들어, 파일의 .ON ( '변경') 이벤트에서 :
$(':file').on('change', function () {
var file = this.files[0];
if (file.size > 1024) {
alert('max upload size is 1k');
}
// Also see .name, .type
});
이제 $ .ajax ()는 버튼의 클릭으로 제출합니다.
$(':button').on('click', function () {
$.ajax({
// Your server script to process the upload
url: 'upload.php',
type: 'POST',
// Form data
data: new FormData($('form')[0]),
// Tell jQuery not to process data or worry about content-type
// You *must* include these options!
cache: false,
contentType: false,
processData: false,
// Custom XMLHttpRequest
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
// For handling the progress of the upload
myXhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
$('progress').attr({
value: e.loaded,
max: e.total,
});
}
}, false);
}
return myXhr;
}
});
});
보시다시피, HTML5 (및 일부 연구) 파일 업로드가 가능하지만 슈퍼 쉽게 업로드 할 수 있습니다.모든 브라우저에서 예제의 일부 HTML5 구성 요소 중 일부는 모든 브라우저에서 사용할 수 없으므로 Google 크롬으로 시도해보십시오.
답변
2019 업데이트 : 아직도 인구 통계가 사용하는 브라우저에 따라 다릅니다.
"New"HTML5 파일 API로 이해해야 할 중요한 것은 IE 10까지 지원되지 않는다는 것입니다. 귀하가 목표로하는 특정 시장이 이전 버전의 Windows의 평균보다 높은 경향이있는 경우그것에 접근하십시오.
2017 년 현재 브라우저의 약 5 %가 IE 6, 7, 8 또는 9 중 하나입니다 (예를 들어, B2B 도구이거나 훈련을 위해 배달하는 훈련을 위해 전달하는 무언가)으로 가면 숫자가 급증 할 수 있습니다.2016 년에 IE8을 사용하는 회사와 50 % 이상의 기계를 사용했습니다.
이 편집에서 2019 년이면, 내 초기 대답이 거의 11 년 후에 있습니다.IE9와 하부는 전 세계적으로 1 % 마크 주위에 있지만 여전히 높은 사용량의 클러스터가 있습니다.
이 기능이 중요한이 기능은 사용자가 사용하는 브라우저가 무엇인지 확인하십시오.그렇지 않으면 "저의 작품"이 클라이언트에게 배달 할 수있는 이유가 충분하지 않은 이유에 대해 빠르고 고통스러운 교훈을 배우게됩니다.Caniuse는 유용한 도구이지만 그들이 인구 통계를 얻는 곳에서는 참고합니다.그들은 당신과 정렬되지 않을 수 있습니다.이것은 절대로 엔터프라이즈 환경보다 결코 진실되지 않습니다.
2008 년의 대답은 다음과 같습니다.
그러나 파일 업로드의 실행 가능한 비 JS 메소드가 있습니다.(CSS로 숨기는) 페이지에서 iframe을 만들고 양식을 대상으로 해당 iframe에 게시 할 수 있습니다.메인 페이지가 이동할 필요가 없습니다.
그것은 "진짜"게시물이므로 전적으로 대화식이 아닙니다.상태가 필요하면 서버 쪽을 처리 할 서버 측이 필요합니다.이는 서버에 따라 다르게 변합니다.ASP.NET에는 더 좋은 메커니즘이 있습니다.PHP 일반이 실패하지만 Perl 또는 Apache 수정을 사용하여 주위를 이동할 수 있습니다.
여러 파일 업로드가 필요한 경우 한 번에 하나씩 각 파일을 수행하는 것이 가장 좋습니다 (최대 파일 업로드 제한을 극복하기 위해).첫 번째 양식을 IFRAME에 게시하고, 위의 진행 상황을 모니터링하고 완료되면 두 번째 양식을 IFRAME 등으로 게시하십시오.
또는 Java / Flash 솔루션을 사용하십시오.그들은 그들이 게시물로 할 수있는 일에 훨씬 더 유연합니다 ...
답변
이 목적을 위해 미세 업 로더 플러그인을 사용하는 것이 좋습니다.JavaScript 코드는 다음과 같습니다.
$(document).ready(function() {
$("#uploadbutton").jsupload({
action: "addFile.do",
onComplete: function(response){
alert( "server response: " + response);
}
});
});
답변
참고 :이 답변은 오래되었지만 xhr을 사용하여 파일을 업로드 할 수 있습니다.
xmlhttpRequest (ajax)를 사용하여 파일을 업로드 할 수 없습니다.iframe 또는 Flash를 사용하여 효과를 시뮬레이트 할 수 있습니다.효과를 얻으려면 iframe을 통해 파일을 게시하는 우수한 jQuery 양식 플러그인.
답변
미래의 독자를 위해 줄 바꿈.
비동기 파일 업로드
HTML5와 함께
FormData와 File API가 지원되는 경우 $ .ajax () 메소드를 사용하여 jQuery로 파일을 업로드 할 수 있습니다 (HTML5 기능 모두).
FormData가없는 파일을 보낼 수도 있지만 어느 쪽이든 파일 API가 XmlHttpRequest (Ajax)로 전송할 수있는 방식으로 파일을 처리하기 위해 파일 API가 있어야합니다.
$.ajax({
url: 'file/destination.html',
type: 'POST',
data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
processData: false,
contentType: false // Using FormData, no need to process data.
}).done(function(){
console.log("Success: Files sent!");
}).fail(function(){
console.log("An error occurred, the files couldn't be sent!");
});
빠른 순수 JavaScript (jQuery 없음) 예제는 "FormData 개체를 사용하여 파일 보내기"를 참조하십시오.
대체물
HTML5가 지원되지 않는 경우 (파일 API 없음) 유일한 다른 순수한 JavaScript 솔루션 (플래시 또는 다른 브라우저 플러그인 없음)은 XMLHttpRequest 객체를 사용하지 않고 비동기 요청을 에뮬레이션 할 수있는 숨겨진 iframe 기술입니다.
파일 입력이있는 양식 대상으로 IFRAME을 설정하는 것으로 구성됩니다.사용자가 요청을 제출하면 파일이 업로드되지만이 페이지를 다시 렌더링하는 대신 iframe 내부에 응답이 표시됩니다.iframe을 숨기면 전체 프로세스가 사용자에게 투명하게되어 비동기 요청을 에뮬레이트합니다.
제대로 완료되면 사실상 모든 브라우저에서 작동하지만 IFRAME에서 응답을 얻는 방법으로 약간의주의 사항이 있습니다.
이 경우 iFrame 기술을 사용하는 Bifröst와 같은 래퍼 플러그인을 사용하는 것을 선호 할 수 있지만 이와 같이 $ .ajax () 메서드만으로 파일을 보낼 수있는 jQuery Ajax 전송을 제공합니다.
$.ajax({
url: 'file/destination.html',
type: 'POST',
// Set the transport to use (iframe means to use Bifröst)
// and the expected data type (json in this case).
dataType: 'iframe json',
fileInputs: $('input[type="file"]'), // The file inputs containing the files to send.
data: { msg: 'Some extra data you might need.'}
}).done(function(){
console.log("Success: Files sent!");
}).fail(function(){
console.log("An error occurred, the files couldn't be sent!");
});
플러그인
Bifröst는 jQuery의 ajax 메소드에 폴백 지원을 추가하는 작은 래퍼 일뿐 만 아니라 jQuery 양식 플러그인 또는 jQuery 파일 업로드와 같은 많은 플러그인 중 많은 부분이 HTML5의 전체 스택을 다른 대체 및 프로세스를 쉽게 편리하게하는 유용한 기능을 포함합니다.귀하의 요구 사항 및 요구 사항에 따라 귀하는이 플러그인 중 어느 것도 없거나이 플러그인 중 하나를 고려할 수 있습니다.
답변
이 Ajax 파일 업로드 jQuery 플러그인은 파일을 Andhwere 업로드하고 콜백에 대한 응답, 다른 것은 없습니다.
특정 HTML에 의존하지 않으며 특정 방식으로 서버가 응답 할 필요가 없습니다. 사용하는 파일이나 페이지에있는 파일이 얼마나되는지는 중요하지 않습니다.
- 조금만 사용하십시오 -
$('#one-specific-file').ajaxfileupload({
'action': '/upload.php'
});
- 또는만큼 -
$('input[type="file"]').ajaxfileupload({
'action': '/upload.php',
'params': {
'extra': 'info'
},
'onComplete': function(response) {
console.log('custom handler for file:');
alert(JSON.stringify(response));
},
'onStart': function() {
if(weWantedTo) return false; // cancels upload
},
'onCancel': function() {
console.log('no file selected');
}
});
최근댓글