美文网首页
图片上传,选择文件之后将图片显示在页面上

图片上传,选择文件之后将图片显示在页面上

作者: 忘了呼吸的那只猫 | 来源:发表于2020-03-07 14:59 被阅读0次
    <div class="upload_box">
    <b>上传图片</b>
    <input type="file" name="file" id="file" accept="image/*" onchange="imgChange(this);"/> <!--文件上传选择按钮-->
    <di vid="preview">
    <img id="imghead" src="/style/images/blank.gif" width="260" height="180" /> <!--图片显示位置-->
    </div>
    </div>
    
    
    <script type="text/javascript">
    // 选择图片显示
    function imgChange(obj) {
    //获取点击的文本框
    var file =document.getElementById("file");
    var imgUrl =window.URL.createObjectURL(file.files[0]);
    var img =document.getElementById('imghead');
    img.setAttribute('src',imgUrl); // 修改img标签src属性值
    };
    </script>
    
    

    相关文章

      网友评论

          本文标题:图片上传,选择文件之后将图片显示在页面上

          本文链接:https://www.haomeiwen.com/subject/cnscdhtx.html