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

Can not upload file to perl script using ajax/javascript

本文关键字：文件 脚本 perl javascript ajax      更新时间：2023-09-26

我有一个表单，它采用sinlge文件映像上传到使用binmode读取和保存的perl脚本。perl脚本似乎没有得到文件流（文件大小最终为0字节）。我不确定我是否将html输入中的正确名称/ref传递/使用到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;
#

您使用的任何变量都没有引用该文件。这就是为什么它没有被包括在内。

与其尝试发送文件名，不如发送输入。

替换：

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);
}

好的，多亏了@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脚本没有更改

相关文章：