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

我已通过以下链接更新了您的image

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(); } }按钮元素。因此，下一次，它会因图像不再位于文件控件旁边而中断。

我通过使用{{1}}方法来解决此问题，从而修复了此问题。

{{1}}

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

1 个答案: