javascript - jQuery 文件上传预览/删除图像无法正常工作

Question

您可以在 Jsfiddle 找到工作文件

/* JavaScript */

function readURL() {
	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) { 
		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/

第一次选择图像时，按钮的下一个元素是图像。但是，一旦选择了图像，您就在文件控件旁边添加了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(); 
  }
}