Javascript回显图片

ZOE^V1

已于 2022-04-04 22:10:48 修改

阅读量2.5k

点赞数 1

分类专栏： js 文章标签： html 前端 javascript

于 2022-04-04 22:08:57 首次发布

本文链接：https://blog.csdn.net/weixin_52568554/article/details/123961524

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Javascript回显图片

第一种base64

<!DOCTYPE html>
<html>
    <head>
        <script type = "text/javascript" src = "../js/jquery-1.11.0.min.js"></script>
        <style>
            .submitimg{
                width:50px;
                height:50px;
            }
        </style>
    </head>
    <body>
        <!-- 由于javascript是在浏览器环境运行的脚本语言，所以javascript的权限很低，不能操作本地资源，这样的好处是安全性提高了，但是也带来了开发的不便。 -->
        <!--头像-->
    <div class="head-p" id="touxiang">
        <img  src="../img/头像.jpg" alt='头像'  width="100" height="100" id="avatar_img">
   </div>
   <div  id="fromTx">
        <input type="file" class="file"  name="avatar" id="avatar">
   </div>
      <script>
          // 头像预览
$("#avatar").change(function () {
    //拿到文件数据
    var choose_file = $(this)[0].files[0];
    console.log($(this))
    console.log($(this)[0].files)
    console.log(choose_file)
    //截取图片名称小数点后的字符串
    var ftype=choose_file.name.substring(choose_file.name.lastIndexOf(".")+1);
    //校验格式是否是图片类型
    if(ftype=="jpg" || ftype=="png" || ftype=="jpeg" || ftype == "JPG"){
        // //限制大小，照片大小不能超过1M
        // var size = choose_file.size / 1024 / 1024;
        // if (size > 1) {
        //     alert("头像不能大于1M");
        //     return false;
        // }
    // 实例化一个阅读器对象
    var reader = new FileReader();
    // 读取文件的路径，没有返回值,结果在reader.result里
    reader.readAsDataURL(choose_file);
    // 读取需要时间，读完后再修改图片路径
    reader.onload=function () {
        //回显给上方图片中
        $("#avatar_img").attr("src",this.result); 
    }
    }else{
        alert("头像格式不对，请重新选择！");
        return false;
    }
});
      </script>  
    </body>
</html>

第二种window.URL.createObjectURL/window.URL.webkitURL

<!DOCTYPE html>
<html>
 
<head>
    <title>test page</title>
</head>
 
<body>
    <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this)" style="display:none; ">
    <div id="fileList" style="width:200px;height:200px; border:1px solid #ccc;"></div>
    <button onclick="submitImg()">上传图片</button>
    <div>
    <img src="blob:null/336a4725-b376-498f-9ba1-1f66b3912828" width="200"></div>
    <img src="../img/头像.jpg" width="200"></div>
</body>
 
<script>
    window.URL = window.URL || window.webkitURL;
    var fileElem = document.getElementById("fileElem"),
        fileList = document.getElementById("fileList");
 
    function handleFiles(obj) {
        var files = obj.files;
        console.log("files",files)
            img = new Image();
        if (window.URL) {
            //File API
            alert(files[0].name + "," + files[0].size + " bytes1");
            img.src = window.URL.createObjectURL(files[0]); //创建一个object URL，并不是你的本地路径
            console.log("img.src1",img.src)
            img.width = 200;
            img.onload = function (e) {
                console.log("img.src1",this.src)
                window.URL.revokeObjectURL(this.src); //图片加载后，释放object URL
            }
            fileList.appendChild(img);
        } else if (window.FileReader) {
            //opera不支持createObjectURL/revokeObjectURL方法。用FileReader对象来处理
            var reader = new FileReader();
            reader.readAsDataURL(files[0]);
            reader.onload = function (e) {
                alert(files[0].name + "," + e.total + " bytes2");
                img.src = this.result;
                console.log("img.src2",img.src)
                img.width = 200;
                fileList.appendChild(img);
            }
        } else {
            //ie
            obj.select();
            obj.blur();
            var nfile = document.selection.createRange().text;
            document.selection.empty();
            img.src = nfile;
            console.log("img.src3",img.src)
            img.width = 200;
            img.onload = function () {
                alert(nfile + "," + img.fileSize + " bytes3");
            }
            fileList.appendChild(img);
        }
    }
    function submitImg() {
        fileElem.click()
    }
</script>
 
</html>

第三种blob:二进制数据流

<!DOCTYPE html >
  <html >
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title></title> 
    </head> 
     <body> 
        <input type="file" id="input" />
        <script>
           input.onchange = function(e){
              var file = e.target.files[0]
              var img = new Image();
              console.log(img)
              img.src = URL.createObjectURL(file);
            //   blob:null/274f3c5e-2867-4d11-8318-5f4ef6a6f1a3
              console.log(URL.createObjectURL(file))
              document.body.appendChild(img)
           }
        </script> 
    </body> 
 </html>

第四种base64

<!DOCTYPE html>
  <html >
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title></title> 
    </head> 
     <body> 
        <input type="file" id="input" />
        <script>
           input.onchange = function(e){
              var file = e.target.files[0]
              var img = new Image()
              document.body.appendChild(img)
              var fileRead = new FileReader()
              fileRead.onload = function(){
                  img.src = fileRead.result
                  //利用base64回显图片
                  console.log(fileRead.result)
              }
              fileRead.readAsDataURL(file)
           }
        </script> 
    </body> 
 </html>

ZOE^V1

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Javascript回显图片

Javascript回显图片第一种base64<!DOCTYPE html><html> <head> <script type = "text/javascript" src = "../js/jquery-1.11.0.min.js"></script> <style> .submitimg{ width:50px;
复制链接

扫一扫