图片上传及时预览

最新推荐文章于 2019-07-14 21:11:58 发布

xiaopengyaonixi

最新推荐文章于 2019-07-14 21:11:58 发布

阅读量521

点赞数

分类专栏： Html5

Html5 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

使用html5 file api实现：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>uploadImg</title>
  </head>
  <body>
    <div>
      <p>
        <input type="file" id="fileupload"/>
      </p>
      <p>
        <img id="fileImg" style="width:500px;height:300px;border:solid 1px gray;background-size:100% 100%;"/>
      </p>
      <p>
        <div id="detailinfo"></div>
      </p>
    </div>
    <script type="text/javascript">
      var imgbtn = document.getElementById("fileupload");
      var imgview = document.getElementById("fileImg");
      var info = document.getElementById("detailinfo");
      // 监听文件改变事件
      imgbtn.addEventListener("change",function(e){
        imgview.style.backgroundImage = "";
        // 判断是否有文件
        if(!imgbtn.value){
          info.innerHTML = "没有选择文件";
          return;
        }
        // 获取file
        var file = imgbtn.files[0];
        // 获取file的信息
        info.innerHTML = "文件:"+file.name+"<br/>"+
                        "大小:"+file.size+"<br/>"+
                        "修改:"+file.lastModifiedDate;
        // 判断文件格式
        if(file.type!=="image/jpeg"&&file.type!=="image/png"
            &&file.type!=="image/gif"){
                alert("不是有效的图片文件");
                return;
        }
        // 读取文件
        var reader = new FileReader();
        reader.onload = function(e){
          console.log(e);
          var data = e.target.result;
          imgview.style.backgroundImage = 'url('+data+')';
        };
        // 以DataURL的形式读取文件
        reader.readAsDataURL(file);
      });
    </script>
  </body>
</html>

效果：