jQuery的文件上傳預覽/刪除圖片不能正常工作

Question

您可以在Jsfiddle

/* JavaScript */ 
 

 
function readURL() { 
 
\t var $input = $(this); 
 
    if (this.files && this.files[0]) { 
 
     var reader = new FileReader(); 
 
     reader.onload = function(e) { 
 
      $input.next('.blah').attr('src', e.target.result).show(); 
 
      $input.after('<input type="button" class="delbtn" value="remove">'); 
 
     } 
 
     reader.readAsDataURL(this.files[0]); 
 
    } 
 
    } 
 

 
    $(".imgInp").change(readURL); 
 

 
    $("form").on('click', '.delbtn', function(e) { 
 
\t \t var $input = $(this); 
 
     $input.next('.blah').attr('src', e.target.result).hide(); 
 
     $input.prev('.imgInp').val(""); 
 
     $(this).closest(".delbtn").remove();  
 
});

<form name="" action="" method="post"> 
 
    <div class="div"> 
 
    <input type='file' class="imgInp blah" /> 
 
    <img class="blah" src="#" alt="your image"/></div> 
 
    <br> 
 
    <br> 
 
    <div class="div"> 
 
    <input type='file' class="imgInp" /> 
 
    <img class="blah" src="#" alt="your image"/></div> 
 
</form>

顯示找到的工作文件，並刪除圖像是工作的罰款。

但是，如果圖像已被選中，並再次選擇另一個新的圖像，然後預覽功能不起作用。另外刪除按鈕不斷添加。請檢查下面的錯誤圖像。

Click to view the error

Answer 1

我在下面的鏈接更新您的fiddle，

https://jsfiddle.net/balasuar/97dzkf70/20/

第一次當您選擇image，按鈕的下一個元素是image。但是一旦圖像被選中，你就在文件控件旁邊添加了Remove按鈕元素。所以下一次，它會因爲圖像不再位於文件控件旁邊而中斷。

我使用reset方法來清除它，我在下面進行了修正。

function readURL() { 
    var $input = $(this); 
    if (this.files && this.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      reset($input.next('.delbtn'), true); 
      $input.next('.blah').attr('src', e.target.result).show(); 
      $input.after('<input type="button" class="delbtn" value="remove">'); 
     } 
     reader.readAsDataURL(this.files[0]); 
    } 
} 

$(".imgInp").change(readURL); 

$("form").on('click', '.delbtn', function(e) { 
     reset($(this)); 
}); 

function reset(elm, prserveFileName){ 
    if(elm && elm.length > 0) { 
    var $input = elm; 
     $input.next('.blah').attr('src', '').hide(); 
     if(!prserveFileName){ 
      $input.prev('.imgInp').val(""); 
     } 
     elm.remove(); 
    } 
}