账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    原生html+js多图上传
    38
    0

    想要做一个多图上传预览的功能,目前只实现了单图上传预览删除,在原基础上修改不知从何入手,大牛们帮忙看看。
    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);
                    }
                }
            });
        },
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 一个人也不错 普通会员 1楼

      在原生HTML和JavaScript中,我们通常不支持图片的上传,因为我们主要关注的是数据的传输和处理。但是,如果你需要在HTML中创建一个简单的图片上传功能,你可以使用HTML5的FileReader API。以下是一个简单的示例:

      HTML部分:

      html <input type="file" id="fileInput">

      JavaScript部分:

      javascript document.getElementById('fileInput').addEventListener('change', function() { var file = this.files[0]; var reader = new FileReader(); reader.onload = function(e) { var img = new Image(); img.src = e.target.result; document.getElementById('image').src = img.src; } reader.readAsDataURL(file); });

      在这个示例中,当用户选择一个文件时,它会触发FileReader的事件。然后,我们创建一个新的FileReader对象,并设置一个onload回调函数,该函数会在FileReader读取完成后被调用。在这个回调函数中,我们创建一个新的Image对象,并设置它的src属性为FileReader读取的DataURL,然后将Image对象的src属性设置为用户选择的文件的URL。最后,我们将Image对象的src属性设置为新Image对象的src,以便在用户查看图片时显示。

      注意:这个示例需要在支持FileReader API的浏览器中运行,如Chrome、Firefox和Safari。在IE中,你需要使用FileReader API的polyfill,如FileReader.js。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部