使用純jQuery自定義文件上傳加載器

目前，我正在使用純jQuery的文件上傳與任何插件。我只需要上傳Jpeg，並且需要在同一個容器中查看，我需要在圖像加載後刪除圖像。最初我的刪除是隱藏的，因爲我沒有上傳任何圖像。使用純jQuery自定義文件上傳加載器

這裏是我當前的代碼

<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

請幫我

來源

2015-08-25 Mahadevan

綁定change事件上的文件輸入

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

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

來源

2015-08-25 19:12:04 eaCe

喜@eace感謝爲了努力，但是當我有時上傳圖像的圖像大小也需要減少按容器大小和更多你可以請幫我啓用刪除按鈕一旦圖像上傳，如果我點擊刪除按鈕圖像也需要刪除 – Mahadevan

當然，這裏是新的小提琴 - 圖像大小和按鈕 http://jsfiddle.net/w7oma05h/3/ 我從來沒有真正獲得重置功能的工作，但看看這個鏈接http://stackoverflow.com/a/1043969/4964433 – eaCe

@eaCe由於這是一個後續問題，所以我不會將此作爲答案發布，因爲您已經給出了正確的答案 - 我已經調整了小提琴以刪除圖像並將刪除按鈕設置爲「顯示：none' again：http://jsfiddle.net/w7oma05h/4/ –

使用純jQuery自定義文件上傳加載器

回答

相關問題