Question

我有一个表单，它将一个sinlge文件映像上传到perl脚本，该脚本使用binmode进行读取和保存。 perl脚本似乎没有获取文件流（filesize最终大小为0字节）。我不确定我是否正在使用正确的名称/ ref从html输入到javascript formdata.append。我暂时避免使用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

您使用的所有变量都不会引用该文件。这就是它没有被包括在内的原因。

不是尝试发送文件名，而是发送输入。

替换：

formdata.append("filename",filename);

使用：

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

更好的是，停止手动获取数据，只需一次性发送整个表单：

<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，因为它们不是形式的varibales。

新的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脚本

无法使用ajax / javascript

2 个答案: