HTML5 JavaScript POST 文件上传答案

【问题标题】：HTML5 JavaScript POST file uploadHTML5 JavaScript POST 文件上传
【发布时间】：2012-03-16 22:45:07
【问题描述】：

最近我一直在考虑在我已经很简单的 php 文件上传脚本中添加一个简单的 HTML5 拖放。我已经阅读了很多教程和其他解决方案，但我似乎无法理解将文件发送到服务器部分的整个过程。据我了解， XMLHttpRequest 将发送数据，但它会在不重新加载页面的情况下完成。这个，我不想要。目前我正在使用的脚本将获取 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>

【问题讨论】：

如果你想重新加载页面，完全没有理由使用 XMLHttpRequest；只需执行常规表单 POST。
@Pointy 删除文件后如何设置文件输入字段？
如果您想发布更多关于您正在调查的“拖放”机制的详细信息，您可能会获得更多帮助。在某些浏览器中，文件输入字段可以是原生放置目标。
...不过，话虽如此，我不确定要使<input type=file> 字段以普通形式作为放置目标工作，必须发生什么。
@PeeHaa 我已经添加了我正在使用的拖放代码

标签： javascript html upload xmlhttprequest

【解决方案1】：

经过更多的阅读和搜索，我得出的结论是我最初想要的无法完成。

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

抱歉，我不太清楚我想要什么。我自己也不是很确定。并感谢您的回复/cmets。

【讨论】：

【解决方案2】：

如果您使用 JQuery 或其他支持事件的 javascript 库，您应该能够捕获拖动事件并提交您的表单。

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

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

但不涉及 XMLHttpRequest...

【讨论】：

删除文件后如何设置文件输入字段？由于存在安全风险，我认为这是不可能的。