2016-08-23 2 views
3

ajax 호출에서 양식없이 일반 데이터와 함께 파일 데이터를 추가하려면 어떻게해야합니까? 난 내 아약스 스크립트가 현재는FormData를 사용하지 않고 아약스 호출에서 파일 데이터를 추가하는 방법은 무엇입니까?

$("body").on("click", "#next-step", function(event){ 
       $("#loader").show(); 
       event.preventDefault();    

       var file = $("#upload_logo")[0].files[0]; 
       $.ajax({ 
        type: 'POST', 
        url: 'step-two.php', 
        data:{ 
         name : "my name", 
        }, 
        file : {upload_logo : file}, 
        contentType: false, 
        processData: false, 
        success: function(response) 
        { 
         $("#loader").hide(); 
         alert(response); 

        } 
       }) 


    }); 

나는 해결책을 발견하지만 내가 그것을

event.preventDefault(); 
       var fdata = new FormData() 


       if($("#upload_logo")[0].files.length>0) 
        fdata.append("upload_logo",$("#upload_logo")[0].files[0]) 

       $.ajax({ 
        type: 'POST', 
        url: 'step-two.php', 
        data:{fdata}, 

일을하고 싶은 방법은 아니다 그리고 그것은 작동하지만, 내 질문은 만약에 내가 그냥 내 파일을 데이터에 추가하고 싶습니다. 어떻게해야합니까? 대신 FormData()를 사용하는 대신?

+2

? 허용되는 파일 업로드 방법입니다. 다른 일을하는 것은 오래된 기술을 사용하고 있습니다. –

+0

당신이 옳다는 것을 알고 싶습니다. 데이터 필드에 일반 입력 필드를 추가하는 것처럼 파일 필드를 추가하는 것이 가능하지 않습니까? 왜냐하면 나는 첫 번째 코드 파일 ({upload_logo : file})에서했던 것처럼 어디서나 찾을 수 없기 때문에 가능하지 않습니까? –

+1

예, 파일 내부의 데이터가 POST 요청의 일부로 전송되도록하려면 FormData를 사용해야합니다. 데이터를 파일 내용과 함께 사용할 수도 있습니다. data : {name : 'my name', fileContent : fdata} –

답변

-2
Use Form data 

var formData = new FormData('form id'); 
    $.ajax({ 
type: 'post', 
async: false, 
cache: false, 
url: '', 
contentType: false, 
processData: false, 
data: formData, 
dataType: 'json', 
success: function (response) { 

    } 
}); 
+0

양식이 없습니다. 입력 필드가 있습니다. 내 질문은 어떻게 처리합니까? FormData()를 사용하지 않고이 작업을 수행 할 수 있습니까? –

+0

하지만 클릭 핸들러가있어 특정 클릭에 대한 요청을하지 않으시겠습니까? – khaliq

+0

웹 페이지에는 html 형식이 없습니다. 자바 스크립트에서 파일의 내용을 입력 type = "file"에서 가져 오는 또 다른 객체입니다. –

0

아약스로 파일을 업로드 할 수 없습니다. IFrame을 사용하여 페이지를 새로 고치지 않고도 파일을 업로드 할 수 있습니다. 자세한 내용을 확인할 수 있습니다 here

AJAX를 통한 파일 업로드가 지원됩니다. 예 : FormData 개체를 통해 전송되지만, 불행히도 전체/이전 브라우저에서는 지원되지 않습니다.

FormData 지원은 다음 데스크톱 브라우저 버전에서 시작됩니다. IE 10 +, 파이어 폭스 4.0 이상, 크롬 7 +, 사파리 5+, 오페라 12 + 자세한 내용에 대한

,`formData()`를 사용 뭐가 문제 see MDN link

관련 문제