php上传图片时怎样在页面显示预览图

Posted 2023-04-15

参考技术A 像这样
echo'<img src="http://img1.gtimg.com/gamezone/pics/hv1/242/102/1251/81372527.png">';
图片网址可以换成自己网站目录下的可以相对域名本回答被提问者和网友采纳 参考技术B 这个要用AJAX做的 参考技术C 再读出来噻 参考技术D 是上传前，还是上传后？

图片上传预览

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

　　首先我们先写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
        }
    })