无法使用 ajax/javascript 将文件上传到 perl 脚本答案

【问题标题】：Can not upload file to perl script using ajax/javascript无法使用 ajax/javascript 将文件上传到 perl 脚本
【发布时间】：2016-08-29 21:08:12
【问题描述】：

我有一个表单，该表单将单个文件图像上传到使用 binmode 读取和保存的 perl 脚本。 perl 脚本似乎没有获取文件流（文件大小最终为 0 字节）。我不确定我是否将 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 sn-p 我目前正在使用。在“非 javascript”页面表单提交下，同样的代码对我来说效果很好。

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

【问题讨论】：

你在 Perl 端使用哪个框架/模块？你能添加你的 Perl 代码吗？

标签： javascript ajax perl

【解决方案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);
}

【讨论】：

您的 replace ... with... 代码是错误的，您没有将 img 元素附加到 FormData 对象也是语法。
@Musa — 有一个错字，我错过了 )，但 newimg 是文件输入（如问题所示）而不是 img 元素。
我不知道您可以将 html 元素传递给 FormData.append
天哪，你不能。当我从不使用该语法时，我不检查它是正确的。只需提供表格就容易多了。
我想我可能对 multipart/form-data 有疑问。我仍然得到 0 字节文件，这与表单 Content-type 不是 multipart/form-data 时遇到的问题相同。我确实尝试在发送之前添加xhr.setRequestHeader("Content-type", "multipart/form-data")，但没有帮助。还在调试中...

【解决方案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 脚本没有变化

【讨论】：