HTML5 JavaScript POST文件上传

HTML5 JavaScript POST file upload

本文关键字：文件 POST JavaScript HTML5      更新时间：2023-09-26

最近我一直在考虑在我已经很简单的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>

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

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

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

但没有涉及XMLHttpRequest。。。

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

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

抱歉我没有太清楚我想要什么。我自己也不太确定。感谢您的回复/评论。

相关文章：