HTML5 JavaScript POST文件上传

问题描述：

最近我一直在寻找添加简单的HTML5拖放到我已经很简单的PHP文件上传脚本。我读过很多教程和其他解决方案，但我似乎无法理解整个发送文件到服务器部分。据我所知，XMLHttpRequest将发送数据，但它会做到这一点，而无需重新加载页面。这，我不想要。目前我正在使用的脚本将采用POST数据并生成文件上传输出，例如。服务器下载链接，缩略图如果图像等HTML5 JavaScript POST文件上传

如何拖放提交POST数据并访问上传输出或重新加载页面？

编辑：我使用拖放如下：

<div id="drop_zone">Drag and drop a file here</div> 

    <script> 
      function handleFileSelect(evt) { 
      evt.stopPropagation(); 
      evt.preventDefault(); 

      var files = evt.dataTransfer.files; // FileList object. 


      uploadFile(files[0]); //<-- This is where most examples will use XMLHttpRequest to construct form and send data 
      } 

     function handleDragOver(evt) { 
      evt.stopPropagation(); 
      evt.preventDefault(); 
      document.getElementById('drop_zone').style.backgroundColor = "#faffa3"; 
      evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. 
     } 
     function handleDragLeave(evt) { 
      document.getElementById('drop_zone').style.backgroundColor = ""; 
     } 

      // Setup the dnd listeners. 
      var dropZone = document.getElementById('drop_zone'); 
      dropZone.addEventListener('dragover', handleDragOver, false); 
      dropZone.addEventListener('drop', handleFileSelect, false); 
      dropZone.addEventListener('dragleave', handleDragLeave, false);     
    </script>

你的代码在哪里？ – PeeHaa 2012-02-27 13:00:15

如果你想重新加载页面，没有任何理由使用XMLHttpRequest;只是做一个常规形式POST。 – Pointy 2012-02-27 13:02:14

@Pointy如何在文件被删除后设置文件输入字段？ – CYMA 2012-02-27 13:17:59

答

更多的阅读和周围搜索后，我得出的结论是，我本来想什么不能做。

我正在使用的解决方案是简单地有一个覆盖拖放区域的大型透明/隐藏<input type="file">。丢弃的文件名将从javascript输入中读取并显示在放置区中。这当然会依靠浏览器来支持将文件拖放到html文件输入中。从那里我的上传脚本将非常像用户使用可见文件选择器一样操作。

道歉我没有太清楚我想要的。我不是很确定我自己。并感谢您的回复/评论。

答

如果您使用JQuery或一些其他事件能够JavaScript库，你应该能够赶上拖动事件，并提交您的形成。

http://docs.jquery.com/UI/API/1.8/Draggable

http://api.jquery.com/on/

但没有参与的XMLHttpRequest ...

如何在文件被删除后设置文件输入字段？由于安全风险，我认为这是不可能的。 – CYMA 2012-02-27 13:19:09

HTML5 JavaScript POST文件上传

相关推荐