ajax/javascriptを使ってperlスクリプトにファイルをアップロードできません

Question

私は、binmodeを使って読み込んで保存するperlスクリプトにアップロードするためにsinlgeファイルイメージを受け取るフォームを用意しています。 perlスクリプトはファイルストリームを取得していないようです（ファイルサイズは0バイトになります）。私は/ javascriptのformdata.appendにhtmlの入力から正しい名前/参照を使用して渡しているかどうかはわかりません。私はjqueryとxhrバージョン2のソリューションを当面避けています。私はこの作業を可能にすることを決意しています。

私は現在使用しているHTML入力

<input id="newimg" type="file" onchange="changeimg(this.value,dbtable,dbid);"> 

javascriptの

function changeimg(filename,dbtable,dbid) { 

    // ignor "c:\fakepath\" in filename 
    var filename = document.getElementById('newimg').files[0].name; 

    var formdata = new FormData(); 
    formdata.append("Content-Type", "multipart/form-data"); 
    formdata.append("dbtable",dbtable); 
    formdata.append("dbid",dbid); 
    formdata.append("filename",filename); 

    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     var xhr = new XMLHttpRequest(); 
    } else { 
     // code for IE6, IE5 
     var xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xhr.open("POST","/uploader.pl",true); 
    xhr.send(formdata); 

} 

perlのスニペット。この同じコードは、 "非javascript"ページフォームのサブミットの下で私のためにうまくいきました。

# 
my $upload_filehandle = $cgi->upload("filename"); 
# 
open (UPLOADFILE, ">$newfile"); 
     binmode UPLOADFILE; 
     while (<$upload_filehandle>) { 
     print UPLOADFILE; 
     } 
close UPLOADFILE; 
# 

Answer 1

使用している変数のうち、ファイルをまったく参照していないものがあります。それが含まれていない理由です。

ファイル名を送信する代わりに、入力を送信します。 、いっそ

var file = document.getElementById("newimg").files[0]; 
formdata.append("newimg", file); 

データを手動で取得を停止し、ただ一度に全体のフォームを送信します：

formdata.append("filename",filename); 

で：

置き換え

<input id="newimg" name="newimg" type="file" onchange="changeimg(this.form)"> 

と

function changeimg(form) { 
    var formdata = new FormData(form); 
    var xhr = new XMLHttpRequest(); 
    xhr.open("POST","/uploader.pl",true); 
    xhr.addEventListener("load", function() { alert("Loaded"); }); 
    xhr.send(formdata); 
} 

Answer 2

@Quentinの例のおかげで、これらの変更を使用して動作させることができました。私はdbtableとdbidを付加する必要がありました。

新しいHTML入力

<input type="file" name="filename" onchange="changeimg(this.form,dbtable,dbid);"> 

新しいJavaScriptの

function changeimg(form,table,id) { 
    var formdata = new FormData(form); 
    formdata.append("item",id); 
    formdata.append("table",table); 
    var xhr = new XMLHttpRequest(); 
    xhr.open("POST","/uploader.pl",true); 
    xhr.addEventListener("load", function() { alert("Loaded"); }); 
    xhr.send(formdata); 
} 

スクリプトあなたはPerlの側に使用しないフレームワーク/モジュール