2017-04-04 20 views
1

私は誰かがこれを手伝ってくれることを願っています。私は最後の数日間、頭を頭に向けて叩いています。私はそれを取得しようとしているので、プログラムフィールドに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 
与えられています

それで、私にとっては、すべてが正直であるように見えます。 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を

、 クリストフ

答えて

0

時々私は、このようなとんちきだ。私は木のために森がありませんでした。このライン

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

は、その茶を作る

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

されている必要がありますngeは期待どおりに動作しました。

Uggh。

関連する問題