拖放輸入文件

我有一個非常標準的形式提交的圖像：拖放輸入文件

<form enctype="multipart/form-data" class="form-horizontal" role="form" method="POST"> 
<input id="image" name="image" type="file"/> 
</form>

我希望能夠將圖像拖動到一個區域，這樣它會選擇爲輸入。

我在互聯網上研究過如何做這麼簡單的任務，但是我只能使用AJAX的過度插件，這種插件可悲地不是這種形式的選項。任何人都知道如何做到這一點？

來源

2017-02-20 prgrm

這已經回答幾乎完全是在這裏。你需要的唯一的東西，它看起來像是jQuery，沒有ajax：http://stackoverflow.com/a/12713396/1836515 – Triclops200

有很多好的圖書館這樣做，我使用[dropzoneJS]（http： //www.dropzonejs.com/）這很酷，你應該檢查出來。 – Nicolas

參考這個答案，測試和工作：http://stackoverflow.com/a/24470646/6826238 – wpcoder

只需將圖像拖入輸入。如果你需要一些信息如何處理你的droped圖像的結果（鏈接/標題/ 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>

來源

2017-02-20 16:00:08 MKAD

我認爲這是你在找什麼=） – MKAD

拖放輸入文件

回答

相關問題