jQuery文件上传预览/删除图像

jQuery file upload preview/remove image

本文关键字：删除 图像 文件 jQuery      更新时间：2023-09-26

您可以在jsfiddle

找到工作文件。

图像预览和删除功能很早就开始工作了，但由于一些库的原因，我对html代码做了一些更改。所以现在图像预览不工作，因为父类调用问题在Jquery。请检查工作代码并帮我解决我使用多个输入相同的名称数组。我想在下一个div中显示图像正如我在html代码中提到的。我知道问题来自jquery。但我无法修复它。请帮助。

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('.portimg').attr('src', e.target.result).show();
           $input.after('<input type="button" class="delbtn removebtn" value="remove">');
        }
           reader.readAsDataURL(this.files[0]);
      }
    }
    $(".fileUpload").change(readURL);
    $("form").on('click', '.delbtn', function (e) {
        reset($(this));
    });
function reset(elm, prserveFileName) {
    if (elm && elm.length > 0) {
       var $input = elm;
       $input.next('.portimg').attr('src', '').hide();
       if (!prserveFileName) {
         $input.prev('.fileUpload').val("");
       }
         elm.remove();
       }
}

html代码

<form> <!--working code but it not needed now.-->
  <div class="form-group hirehide is-empty is-fileinput width100">
    <div class=socialmediaside2>
        <input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic type=file value="Choose a file"> 
        <img alt="your image" class=portimg src=#>
        <div class=input-group>
            <input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
            <span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button></span>
        </div>
    </div>
</div> 
<!--below code is not working. I need this to be work-->
<div class="form-group hirehide is-empty is-fileinput width100">
    <div class=socialmediaside2>
        <input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic type=file value="Choose a file">
        <div class=input-group>
            <input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
            <span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button></span>
        </div>
    </div>
</div>
<div class=upload-demo>
    <div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
</div>

请尝试此版本:

HTML: 

<form>
<div>
<div class="form-group hirehide is-empty is-fileinput width100">
    <div class=socialmediaside2>
        <input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic[] type=file value="Choose a file">
        <div class=input-group>
            <input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
            <span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button></span>
        </div>
    </div>
</div>
<div class=upload-demo>
    <div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
</div>
</div>
<div>
<div class="form-group hirehide is-empty is-fileinput width100">
    <div class=socialmediaside2>
        <input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic[] type=file value="Choose a file">
        <div class=input-group>
            <input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
            <span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button></span>
        </div>
    </div>
</div>
<div class=upload-demo>
    <div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
</div>
</div>
<div>
<div class="form-group hirehide is-empty is-fileinput width100">
    <div class=socialmediaside2>
        <input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic[] type=file value="Choose a file">
        <div class=input-group>
            <input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
            <span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button></span>
        </div>
    </div>
</div>
<div class=upload-demo>
    <div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
</div>
</div>
</form>

JS: 

function readURL() {
    var $input = $(this);
    var $newinput =  $(this).parent().parent().parent().find('.portimg ');
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            reset($newinput.next('.delbtn'), true);
            $newinput.attr('src', e.target.result).show();
            $newinput.after('<input type="button" class="delbtn removebtn" value="remove">');
        }
        reader.readAsDataURL(this.files[0]);
    }
}
$(".fileUpload").change(readURL);
$("form").on('click', '.delbtn', function (e) {
    reset($(this));
});
function reset(elm, prserveFileName) {
    if (elm && elm.length > 0) {
        var $input = elm;
        $input.prev('.portimg').attr('src', '').hide();
        if (!prserveFileName) {
            $($input).parent().parent().parent().find('input.fileUpload ').val("");
            //input.fileUpload and input#uploadre both need to empty values for particular div
        }
        elm.remove();
    }
}

JSFiddle: https://jsfiddle.net/hxwmL1px/4/

只需添加以下html代码。检查Working Demo，现在在评论中检查下面更新的链接。

 <img alt="your image" class=portimg src=#>
相关文章：