Native html+js multi-image upload

want to do a multi-image upload preview function, currently only achieve a single image upload preview deletion, modify on the original basis do not know where to start, Daniel help take a look.
html:

    <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <div class="col-sm-10">
                    <img src="" id="img" width="100px" height="100px"> 
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <div class="col-sm-10">
                    <input id="photoCover" class="form-control" readonly type="text">
                    <label class="input-group-btn"> 
                    <input id="file" type="file" name="file" multiple="multiple" style="left: -9999px; position: absolute;"> 
                    <span class="btn btn-default"></span>
                    </label>
                </div>
            </div>

js part
/ / Picture Preview

$(function () {
$("-sharpfile").change(function (e) {
    var file = e.target.files[0];
    $("-sharpphotoCover").val(document.getElementById("file").files[0].name);
    if (file) {
        var reader = new FileReader();
        reader.onload = function () {
            $("img").attr("src", this.result);
        }
        reader.readAsDataURL(file);
    }
});

})

/ / form Save

        savefunction (event) {var url = "network/server/update";
        var networkServiceType = $("-sharpnetworkServiceType").val().trim();
        var networkServiceName = $("-sharpnetworkServiceName").val().trim();
        var networkServiceAdd = $("-sharpnetworkServiceAdd").val().trim();
        var networkServiceTel = $("-sharpnetworkServiceTel").val().trim();
        var networkServiceLongitude = $("-sharpnetworkServiceLongitude").val().trim();
        var networkServiceLatitude = $("-sharpnetworkServiceLatitude").val().trim();
        var file = document.getElementById("file").files[0];
        var formData = new FormData();
        formData.append("networkServiceType", networkServiceType);
        formData.append("networkServiceName", networkServiceName);
        formData.append("networkServiceAdd", networkServiceAdd);
        formData.append("networkServiceTel",networkServiceTel);
        formData.append("networkServiceLongitude",networkServiceLongitude);
        formData.append("networkServiceLatitude",networkServiceLatitude);
        formData.append("file", file);
        
        $.ajax({
            type: "POST",
            url: projectname + url,
            data: formData,
            contentType: false,
            processData: false,
            mimeType: "multipart/form-data",
            success: function (data) {
                if(data.code ===0){
                    alert("", function(index){
                        vm.reload();
                    });
                }else{
                    alert(data.msg);
                }
            }
        });
    },
Mar.07,2021
Menu