原生html+js多图上传

想要做一个多图上传预览的功能,目前只实现了单图上传预览删除,在原基础上修改不知从何入手,大牛们帮忙看看。
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部分
//图片预览

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

})

//表单保存

        savefunction (event) {var url = "network/server/update";
        var networkServiceType = $("#networkServiceType").val().trim();
        var networkServiceName = $("#networkServiceName").val().trim();
        var networkServiceAdd = $("#networkServiceAdd").val().trim();
        var networkServiceTel = $("#networkServiceTel").val().trim();
        var networkServiceLongitude = $("#networkServiceLongitude").val().trim();
        var networkServiceLatitude = $("#networkServiceLatitude").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);
                }
            }
        });
    },
阅读 1.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题