반응형
Jquery/AJAX를 통한 파일 업로드 방법
현재 AJAX를 통해 다음 코드로 양식을 게시하고 있습니다.
$(document).ready(function(){
$("form#createForm").submit(function() { // loginForm is submitted
$("form#createForm input#createForm_submit").attr('disabled','disabled');
tinyMCE.triggerSave();
$.ajax({
type: "POST",
dataType: "json",
url: "perform", // URL of the Perl script
data: $("#createForm").serialize(),
// script call was successful
// data contains the JSON values returned by the Perl script
success: function(data){
$('div.form-group').each(function(){
$(this).removeClass('has-error');
});
if (data.error) { // script returned error
var myList = $('ul.msg-list').empty();
$.each(data.msg, function(key,item) {
$("div."+key).addClass('has-error');
$('<li>').text(item.errtxt).appendTo(myList);
});
$('div#create_createresult').html('some error').html(myList);
$('div#create_createresult').addClass("text-danger");
$("form#createForm input#createForm_submit").removeAttr('disabled');
} // if
else
{ // login was successful
//$('form#login_loginform').hide();
$('div#create_createresult').text(data.msg);
$('div#create_createresult').addClass("success");
} //else
} // success
}); // ajax
$('div#login_loginresult').fadeIn();
return false;
});
});
이제 동일한 양식으로 사진을 업로드할 수 있는 가능성을 추가하고 이 JQUERY 및 동일한 서버 측 스크립트에서 구현합니다.제 유일한 문제는 어떻게 해야 할지 모른다는 거예요위에서 테스트한 결과 $_FILES 변수가 서버 쪽 스크립트에 전달되지 않습니다.
이 스크립트로 이미지 업로드 가능성을 추가하기 위해 제가 해야 할 일을 지시할 수 있는 사람이 있습니까?
이것을 사용해 보세요.
// grab your file object from a file input
$('#fileInput').change(function () {
sendFile(this.files[0]);
});
// can also be from a drag-from-desktop drop
$('dropZone')[0].ondrop = function (e) {
e.preventDefault();
sendFile(e.dataTransfer.files[0]);
};
function sendFile(file) {
$.ajax({
type: 'post',
url: '/targeturl?name=' + file.name,
data: file,
success: function () {
// do something
},
xhrFields: {
// add listener to XMLHTTPRequest object directly for progress (jquery doesn't have this yet)
onprogress: function (progress) {
// calculate upload progress
var percentage = Math.floor((progress.total / progress.totalSize) * 100);
// log upload progress to console
console.log('progress', percentage);
if (percentage === 100) {
console.log('DONE!');
}
}
},
processData: false,
contentType: file.type
});
}
언급URL : https://stackoverflow.com/questions/19920322/how-to-upload-file-through-jquery-ajax
반응형
'programing' 카테고리의 다른 글
mariadb가 많은 요청 후 응답하지 않습니다. (0) | 2023.08.30 |
---|---|
동일한 요소에 대해 여러 개의 유사 요소를 가질 수 있습니까? (0) | 2023.08.30 |
PowerShell을 사용한 StackOverflow 평판 (0) | 2023.08.30 |
MariaDB Galera 클러스터 또는 표준 복제 (0) | 2023.08.30 |
.net c# excel 열 자동 맞춤 (0) | 2023.08.30 |