Question

我的网站上有一堆文件上传，我正在考虑将它们变成拖放字段。但是我似乎遇到了问题。

有没有办法在不使用javascript或插件的情况下完成拖放系统？我试图尽可能轻松地使用最少量的代码。

我已经看过几种不同的方法，例如http://html5demos.com/dnd-upload，但它们都包含javascript。

目前我只有常规输入，看起来像这样

<input type="file" multiple="true" name="" value="" />

Answer 1

如果不使用javascript，就没有办法做到这一点。但是，这是一个使用javascript的简单示例。如果将图像拖到红色div上，则会将图像附加到正文。我已经确认它适用于IE11，Chrome 38和Firefox 32.有关更详细的说明，请参阅Html5Rocks文章。

<div id="dropZone" style="width: 100px; height: 100px; background-color: red"></div>
<script>
    var dropZone = document.getElementById('dropZone');

    // Optional.   Show the copy icon when dragging over.  Seems to only work for chrome.
    dropZone.addEventListener('dragover', function(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
    });

    // Get file data on drop
    dropZone.addEventListener('drop', function(e) {
        e.stopPropagation();
        e.preventDefault();
        var files = e.dataTransfer.files; // Array of all files
        for (var i=0, file; file=files[i]; i++) {
            if (file.type.match(/image.*/)) {
                var reader = new FileReader();
                reader.onload = function(e2) {
                    var img = document.createElement('img');
                    img.src= e2.target.result;
                    document.body.appendChild(img);
                }
                reader.readAsDataURL(file);
    }   }   });
</script>

html5拖放文件上传

1 个答案: