Drag n 'Drop File Upload

Question

У меня есть веб-приложение, которое позволяет пользователю дважды щелкнуть DIV/placeholder, что, в свою очередь, вызывает диалог загрузки браузера. После выбора изображения я использую FileReader, чтобы прочитать изображение и отобразить его в указанном месте.

Я хотел бы добавить компонент drag n 'drop к этому. Я просмотрел Dropzone и другие скрипты, но все они, похоже, слишком много. Мне просто нужно убрать изображение в указанной области и каким-то образом подключиться к основной загрузке файла браузера, как если бы изображение загружалось в традиционном смысле. И тогда, я мог бы просто передать его вместе с остальной частью моего кода, как обычно.

Вот фрагмент моего текущего кода:

// This is within an updateImage() function which gets triggered by a user 
// double-clicking a Div/image placeholder 

    this.file = $('<input type="file" />'); 
    this.file.trigger('click'); 

    //keep a reference to this so that closures can use it 
    var that = this; 
    this.file.on('change', function(event) { 
     var f = event.target.files[0]; 
     var reader = new FileReader(); 
     reader.onload = function(inner_event) { 
      var image = new Image(); 
      image.onload = function() { 
       // Get all the Image info 
       that.user_image = inner_event.target.result; 

, а затем после некоторой обработки и хранения данных/CSS ...

reader.readAsDataURL(f); 

Answer 1

Вот решение, которое я придумал. По существу, я получить доступ к dblclick и drop события:

// TheImageElement is a placeholder DIV 

this.dom_element.on('drop', function(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
    that.updateImage(evt.originalEvent.dataTransfer.files[0]); 
}); 


this.dom_element.on('dblclick', function() { 
    that.handleImageUpload(); 
}); 

dblclick событие называет handleImageUpload(), который запускает файл <input>:

this.ImageElement.prototype.handleImageUpload = function() { 
    this.file = $('<input type="file" />'); 
    this.file.trigger('click'); 

    //keep a reference to this so that closures can use it 
    var that = this; 
    this.file.on('change', function(event) { 
     that.updateImage(event.target.files[0]); 
    }); 
} 

И теперь оба метода вызвать метод updateImage() и передать Файл:

this.ImageElement.prototype.updateImage = function(theFile) { 
    new_upload = true; 
    // keep a reference to this so that closures can use it 
    var that = this; 
    var f = theFile; 
    var reader = new FileReader(); 
    reader.onload = function(inner_event) { 
     var image = new Image(); 
     image.onload = function() { 

       // Some processing here 
     } 
    } 
    reader.readAsDataURL(f); 
} 

Так что теперь к загрузке файла может быть подключен бот h традиционный двойной щелчок и перетаскивание, используя тот же код для их обработки.