Перетащите входной файл

Question

У меня есть довольно стандартная форма, чтобы отправить изображение:

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

Я хочу, чтобы иметь возможность перетащить изображение в области, так что будет выбрана в качестве входных данных.

Я исследовал в Интернете, как сделать такую ​​простую задачу, но я только переусердствую плагины, которые используют 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>