Question

最近我一直在寻找添加一个简单的HTML5拖放到我已经很简单的php文件上传脚本。我已经阅读了很多教程和其他解决方案，但我似乎无法理解整个文件发送到服务器部分。据我所知，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>

Answer 1

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

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

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

但是没有涉及XMLHttpRequest ......

Answer 2

经过更多阅读和搜索后，我得出结论，我原本想要的东西无法完成。

我要解决的问题是只需要一个覆盖放置区的大透明/隐藏<input type="file">。删除的文件名将使用javascript从输入中读取并显示在放置区中。这当然将依赖浏览器来支持将文件拖放到html文件输入中。从那里我的上传脚本几乎就像用户使用了可见文件选择器一样。

对我想要的东西不太清楚道歉。我不太确定自己。并感谢回复/评论。

HTML5 JavaScript POST文件上传

2 个答案: