Drag & Drop-Eingabedatei

Question

Ich habe ein ziemlich Standardformular ein Bild einreichen:

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

Ich möchte in die Lage, ein Bild auf ein Gebiet zu ziehen, so dass es als Eingang gewählt werden.

Ich habe im Internet recherchiert, wie man so einfache Aufgabe macht, aber ich bekomme nur übertriebene Plug-Ins, die AJAX verwenden, die leider keine Option für dieses Formular ist. Weiß jemand, wie man das macht?

Answer 1

Ziehen Sie einfach Ihr Bild in eine Eingabe. Wenn Sie Informationen darüber benötigen, wie Sie mit dem Ergebnis (link/title/src o.ä.) Ihres Drop-down-Bildes arbeiten können, besuchen Sie einfach diese 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>