Javascript 如何将预览文件从JS上传到PHP

我正在做一个项目，我试图允许用户上传一个xlsx文件（不是预览），通过将其拖动到一个框中进行处理。我希望它能像你一样工作。我能够从用户处获取文件名，以及我认为的二进制字符串，使用：

if（window.FileReader）{
var下降；
addEventHandler（窗口“加载”，函数（）{
var status=document.getElementById（'status'）；
drop=document.getElementById（'drop'）；
var list=document.getElementById（'list'）；
功能取消（e）{
如果（e.preventDefault）{e.preventDefault（）；}
返回false；
}
//告诉浏览器我们*可以*投递到此目标
addEventHandler（删除“dragover”，取消）；
加法器（删除“dragenter”，取消）；
addEventHandler（drop，'drop'，函数（e）{
e=e | | window.event；//如果缺少e参数，则获取window.event（在IE中）
如果（e.preventDefault）{e.preventDefault（）；}//停止浏览器重定向到图像。
var dt=数据传输；
var files=dt.files；
对于（var i=0；i请在阅读文件后尝试执行以下操作：

  var fileContents = new FormData();
  fileContents.append('file', bin);
  $.ajax({
    url :  "processFile.php",
    type: 'POST',
    data: fileContents,
    contentType: false,
    processData: false,
    success: function(data) {
      alert("File sent sucessfully");
    },    
    error: function() {
      alert("Something went wrong");
    }
  });

我是smallpdf的开发人员。我们直接在请求体中上载文件，不需要多部分/表单数据。也不需要使用FileReader API。XMLHttpRequests send方法接受File/Blob等作为参数

我们上传的简化版本如下所示：

函数上传（文件）{
var req=新的XMLHttpRequest（）；
请求addEventListener（'load'，函数（）{
控制台日志（请求状态代码、请求响应文本）；
}.约束（这个）；
请求上传。addEventListener（'progress'，函数（ev）{
console.log（'progress'，ev.loaded/file.size*100）；
}.约束（这个）；
请求upload.addEventListener（'error'，errorHandler）；
请求addEventListener（“错误”，errorHandler）；
请求打开（'POST'，'/upload/url'，true）；
req.setRequestHeader（'Content-Type'，file.Type）；
//在请求正文中发布文件
请求发送（文件）；
}
函数errorHandler（错误）{
console.log（错误）
}

您可以使用类似的方法来获取删除的文件或使用输入字段的文件

var-dropElement=document.body；
功能取消（ev）{
ev.preventDefault（）；
}
//取消dragover事件
dropElement.addEventListener（'dragover'，cancel'）；
//收听丢弃事件
dropElement.addEventListener（'drop'，函数（ev）{
取消（ev）；
var files=[].slice.call（ev.dataTransfer.files）；
files.forEach（上传）；
});
您考虑过使用AJAX将文件发送到您的PHP脚本吗？@WilliamJanoti，没有。您能写一个快速回复，解释如何在这个特定实例中实现这一点，或者推荐一些文章吗？我熟悉jQuery的.AJAX（）函数已经存在，我只是从来没有将其用于文件上传或处理我上面所写的信息。William，我实际上是在没有表单的情况下开发我的HTML。查看我问题的编辑版本以了解更多信息。这正是使过程变得棘手的原因。我认为你不完全理解我的代码是如何工作的。你不知道吗对上面的代码进行ried？不管是否有表单，它都应该可以工作。如果我没记错的话，我想您可以通过打开stdin从php读取请求正文。嗨，Manuel！非常感谢您的帮助，我非常喜欢您的开发。不管怎样，由于某种原因，当我尝试回显/打印$stdin变量或处理它时，我收到了一个未定义的错误您知道为什么会发生这种情况吗？再次感谢。我可以使用“file\u get\u Content”（文件获取内容）让它工作php://input“）；”。谢谢！：）文件内容应该可以工作，但是如果您需要对大文件的支持，我会避免在内存中缓冲整个文件。
<div id="file-container">
  <div id="status">Drag the files from a folder to the selection area below ...</div>
  <div id="drop">Drop Spreadsheet here</div>
  <div id="list"></div>
</div><!--eod #file-container-->

  var fileContents = new FormData();
  fileContents.append('file', bin);
  $.ajax({
    url :  "processFile.php",
    type: 'POST',
    data: fileContents,
    contentType: false,
    processData: false,
    success: function(data) {
      alert("File sent sucessfully");
    },    
    error: function() {
      alert("Something went wrong");
    }
  });