Пользовательский загрузчик файлов с использованием чистого jQuery

Question

В настоящее время я работаю над загрузкой файлов с использованием чистого jquery без каких-либо плагинов. Мне нужно загрузить только Jpeg, и мне нужно посмотреть в том же контейнере, мне нужно удалить изображение после загрузки изображения. Первоначально мое удаление было спрятано, потому что я не загрузил никакого изображения.

Вот мой текущий код

<div class="choose_file" id="imageUploadForm"> 
    <span >Photo</span> 
    <input name="Select File" class="upload" type="file" />   
    </div> 
<button id="btn_del" class="btn_del">Delete</button> 

Вот мой Jquery код

$(function() { 
    $("#btn_del").hide(); 
    $(".upload").on("change", function() 
    { 
    var name = file.name; 
    var size = file.size; 
    var type = file.type; 
    var files = !!this.files ? this.files : []; 

    if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support 

    if (/^image/.test(files[0].type)){ // only image file 
     var reader = new FileReader(); // instance of the FileReader 
     reader.readAsDataURL(files[0]); // read the local file 

     $("#btn_del").show(); 

     $("#btn_del").on("click", function() 
     { 
      $("#imageUploadForm").css("background-image", "none"); 
      $("#btn_del").css("display", "none"); 
     }); 

     reader.onload = function(){ // set image data as background of div 
      $("#imageUploadForm").css("background-image", "url("+this.result+")"); 
     } 
    } 
}); 

});

Фактически я не могу видеть изображение в contianer, но я не получаю кнопку удаления. Acutally я установил переменную для типа Но я смутил, где мне нужно указать тип файла и как проверить.

Просьба направлять мне

Вот скрипка Link

Пожалуйста, помогите мне

Answer 1

Bind событие изменения на входном файле

$(".upload").on("change", function()... 

http://jsfiddle.net/w7oma05h/1/