5

IE 10 では、ファイルをアップロード フィールドにドラッグするたびに、まだファイルが開かれます。これを防ぐ方法は？よくわかりません。助けてください。ドラッグアンドドロップによる原因は、別のdivタグドロップ領域を作成するのではなく、「ファイルアップロードフィールド内」にありますか? アップロードフィールドで動作させる方法はありますか?

                <div id="dnd-upload-box">
                <img id="image" src="https://upload.dev/img/elements/drag_drop.jpg" width="100%" height="100%"/>
                <?php
                    echo $this->Form->input('files', array(
                        'id'        => 'file-input-0',
                        'class'     => 'file-input',
                        'type'      => 'file', 
                        'multiple'  => 'multiple',
                        'name'      => 'fileselect[]', 
                        'onChange'  => 'getFiles(this);'
                    ));     
                ?>      
                </div>


<script type="text/javascript">
    // call initialization file
    $(document).ready(function() {
        Init();
    });

    // getElementById
    function $id(id) {
        return document.getElementById(id);
    }   

    // initialize
    function Init() {               
        var filed = $id("file-input-0");
        filed.addEventListener("dragenter", FileDragHover, false);
        filed.addEventListener("dragover", FileDragHover, false);
        filed.addEventListener("dragleave", FileDragHover, false);
        //filed.addEventListener("drop", FileSelectHandler, false);

    }   

    function FileSelectHandler(e) {
        // cancel event and hover styling
        console.log("selecthandler");
        FileDragHover(e);
        getFiles(e);
    }   

    // file drag hover
    function FileDragHover(e) {
        console.log("draghover");
        e.stopPropagation();
        e.preventDefault();
        e.target.className = (e.type == "dragover" ? "hover" : "");
    }   
</script>
4

2 に答える 2

4

次の HTML ファイルは、IE の完全で最小限の動作例です。<html>( / /etc. ボイラープレートがなくて申し訳ありませんが<body>、テストには必要ありません。)

前述のMSDN ドキュメントのように、イベントでの既定の操作を防止する必要がありますdragover。その場合にのみdrop、パラメータにファイルを含むイベントが発生しeventます。

<input id="testfilefield" type="file" style="background-color: #777; width:300px; height: 100px;">
<script>
    window.addEventListener('load', function() {
        var el = document.getElementById('testfilefield');

        // Block the "dragover" event
        el.addEventListener('dragover', function(e) {
            e.stopPropagation();
            e.preventDefault();
        }, false);

        // Handle the "drop" event
        el.addEventListener('drop', function(e) {
            var firstFile = e.dataTransfer.files[0];
            console.log(firstFile);
            alert('Drop!');
        }, false);
    }, false);
</script>
于 2015-09-15T15:53:18.250 に答える
-1

あなたのコードでは、ドロップ イベントを処理していませんか? Microsoft が開発者マニュアルで述べているように、drop イベントを処理する必要があります。

function dropHandler(event)
{
  event.stopPropagation(); 
  event.preventDefault();
  // Get the file(s) that are dropped.
  var filelist =  event.dataTransfer.files;
  if (!filelist) return;  // if null, exit now
  var filecount = filelist.length;  // get number of dropped files

  if (filecount > 0) 
  {
    // Do something with the files.         
  } 
}
于 2013-06-13T08:08:51.017 に答える