FormData를 사용하여 파일 업로드

나는 누군가가 이것을 도울 수 있기를 바라고 있습니다. 나는 지난 며칠 동안 내 머리를 벽에 부딪 치고 있었다. 프로그래밍 방식으로 ajax를 보내기 전에 양식에 파일 필드를 추가 할 수 있도록 가져 오려고합니다. 궁극적으로 내가하려는 것은 우리의 프레임 워크 내에서 여러 파일 끌어서 놓기를 지원하는 것입니다. 기본 양식이 설정되어 있으며 개별적으로, 개별적으로 업로드 된대로 (각 파일을 끌어 놓은 후에) 각 파일에 사용됩니다. 내가 뭘하려는 건 드래그/삭제 된 파일을 반복하고, 양식에 사본을 추가 한 다음, 그 사본 된 양식을 다시 서버에 게시합니다. 내가 읽은 모든 것은 이것이 가능하다는 것을 나에게 말하고있다. 그러나 내가하는 일과 상관없이 나는 그걸 작동시킬 수 없다.FormData를 사용하여 파일 업로드

<input type="hidden" name="TargetPage" value="/my/uploadHandler.html"> 
<input type="hidden" name="targetFormId" value="ResourceForm"> 
<input type="hidden" name="contextLabel" value="Upload"> 
<input type="hidden" name="ResourceId" value="0"> 
<input type="hidden" name="resourceFormId" value="47"> 
<input type="hidden" name="teamId" value="35"> 
<input type="hidden" name="TeamId" value="35"> 
<input type="hidden" id="fileRestrictions" name="fileRestrictions" value="">

을 내가 oUploadedFile을 CONSOLE.LOG 때, 나는

를 제공하고 있습니다 :

var oFormData = new FormData($form[0]), //$form is a jQuery object 
    oUploadedFile = this.oUploadedFile, //regular HTML input field; yes, in an object 
    sFieldName = oUploadedFile.name, //file_input_1 
    sFileName = oUploadedFile.value.split('\\').pop(); 

oFormData.append(sFieldName, oUploadedFile.files, sFileName); 

$.ajax({ 
    data: oFormData, 
    type: 'post', 
    url: '/my/uploadHandler.html', 
    encoding: 'multipart/form-data', 
    dataType: 'json', 
    /*cache: false,*/ 
    contentType: false, 
    processData: false, 
    uploadProgress: function uploadProgress(oEvent) { 
    }, 
    success: function success(oData, sStatus, oXHR) { 
    }, 
    error: function error(oEvent) { 
    } 
});

이 양식 ($ form.html()) 모습입니다 : 여기 내 코드입니다 내가 oUploadedFile.files을 CONSOLE.LOG 때

<input type="file" name="file_input_1">

는, 나는

> FileList {0: File, length: 1} 
length:1 
0: File 
    lastModified: 1421935281000 
    lastModifiedDate: Thu Jan 22 2015 09:01:21 GMT-0500 (EST) 
    name: "10 Essential Chrome Tips to Skyrocket Your Productivity.pdf" 
    size: 3426463 
    type: "application/pdf" 
    webkitRelativePath: "" 
    __proto__: File 
__proto__: FileList

,369

를 제공하고 있습니다

나에게 모든 것이 정결 한 것처럼 보입니다. FormData 객체를 올바르게 인스턴스화하고 있는데, FormData에 파일 필드를 올바르게 추가하고 있습니다 (https://developer.mozilla.org/en-US/docs/Web/API/FormData/append). 모든 것이 백 엔드에 제출됩니다.

문제는 내가받는 PHP 스크립트에서 $ _REQUEST와 $ _FILES를 로그 아웃하면 $ _FILES가 비어 있고 다른 $ _REQUEST 데이터 ("file_input_1")와 함께 필드 입력 "file_input_1"이 표시된다는 것입니다. 올바른 형식이고 위의 형식으로 필드/값 쌍이 정의되어 있음) "file_input_1"은 값이 비어 있습니다. 나는 틀린 일을하고있을 것임에 틀림 없다. 그러나 나는이 시점에서 무엇이 될지 모른다. 나는 미치고있다. :(

어떤 도움은 매우 주시면 감사하겠습니다!

thnx

, 크리스토프

때때로

출처

2017-04-04 Christoph

나는 그런 바보입니다. 나는 나무의 숲을 누락되었습니다.이 줄

oFormData.append(sFieldName, oUploadedFile.files, sFileName);

는

oFormData.append(sFieldName, oUploadedFile.files[0], sFileName);

그 차를 만들기를 있었어야 nge는 예상대로 작동하도록했습니다.

ugg.

출처

2017-04-04 18:40:23 Christoph

FormData를 사용하여 파일 업로드

답변

관련 문제