ドラッグし、入力ファイル

Question

をドロップするには、私はイメージを提出することはかなり標準的な形式を持っています。

私はこのような単純な作業を行う方法をインターネットで調査しましたが、悲しいことにこのフォームのオプションではないAJAXを使用する過度のプラグインしか得られません。誰でもこれを行う方法を知っていますか？

Answer 1

画像を入力にドラッグするだけです。ドロップされた画像の結果（リンク/タイトル/ srcなど）を操作する方法についての情報が必要な場合は、siteにアクセスしてください。

function handleFileSelect(evt) { 
 
    evt.stopPropagation(); 
 
    evt.preventDefault(); 
 

 
    var files = evt.dataTransfer.files; // FileList object. 
 

 
    // files is a FileList of File objects. List some properties. 
 
    var output = []; 
 
    for (var i = 0, f; f = files[i]; i++) { 
 
     output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', 
 
        f.size, ' bytes, last modified: ', 
 
        f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', 
 
        '</li>'); 
 
    } 
 
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; 
 
    } 
 

 
    function handleDragOver(evt) { 
 
    evt.stopPropagation(); 
 
    evt.preventDefault(); 
 
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. 
 
    } 
 

 
    // Setup the dnd listeners. 
 
    var dropZone = document.getElementById('drop_zone'); 
 
    dropZone.addEventListener('dragover', handleDragOver, false); 
 
    dropZone.addEventListener('drop', handleFileSelect, false);

.example { 
 
    padding: 10px; 
 
    border: 1px solid #ccc; 
 
} 
 

 
#drop_zone { 
 
    border: 2px dashed #bbb; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
    padding: 25px; 
 
    text-align: center; 
 
    font: 20pt bold 'Vollkorn'; 
 
    color: #bbb; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="example"> 
 
    <div id="drop_zone">Drop files here</div> 
 
    <output id="file_list2"></output> 
 
    </div> 
 
    
 
    
 
    <output id="list"></output> 
 
    <br> 
 
    <br> 
 
    <br> 
 

 
<p> Easy solution </p> 
 
    <div class="intro-text"> 
 
    <input class="" type="file" id="file-input" accept="image/*" capture="" name="files[]" multiple=""> 
 
    </div>