图片上传预览

Posted 2021-03-16 duansong

写一些上传文件的程序时我们想把刚刚上传的图片显示在页面上，这个该如何实现呢？

　　首先我们先写html这里注意form标签必须带有 enctype="multipart/form-data"  这个属性，不然文件是上传不了的

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">文章缩略图：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <img id="uploadimg" style="max-width: 200px;display: block;" alt="">  //这里我们隐藏了一个img标签，为了等一下js处理
                <input type="file"  class="input-text" value="" placeholder="" id="picurl" name="picurl">
            </div>
        </div>

　　接下来我写js代码 （我使用的是jQuery框架）

    $("#picurl").on("change",function (e) {  //当我们选择文件给表单时触发的事件
        var file = e.target.files[0];   //获取文件信息
        var fileRead = new FileReader();  //新建一个文件对象获取文件信息
        fileRead.readAsDataURL(file); 
        fileRead.onload=function () {
            $("#uploadimg").show();  //这里我们可以吧之前隐藏的img标签显示出来
            $("#uploadimg").attr(‘src‘,this.result);  //然后获取url给img
        }
    })