zoukankan      html  css  js  c++  java
  • js:上传图片并预览(https://blog.csdn.net/weixin_38023551/article/details/78318532)

    1:

    //filereader 的方法
    <form action="" enctype="multipart/form-data">
    <input id="file" class="filepath" onchange="changepic(this)" type="file"><br>
    <img src="" id="show" width="200">
    </form>
    <script>
    function changepic() {
    var reads= new FileReader();
    f=document.getElementById('file').files[0];
    reads.readAsDataURL(f);
    reads.onload=function (e) {
    document.getElementById('show').src=this.result;
    };
    }
    </script>
    2:

    //createObjectURL的方法
    <form action="" enctype="multipart/form-data">
    <input id="file" class="filepath" onchange="changepic(this)" type="file"><br>
    <img src="" id="show" width="200">
    </form>
    <script>
    function changepic(obj) {
    //console.log(obj.files[0]);//这里可以获取上传文件的name
    var newsrc=getObjectURL(obj.files[0]);
    document.getElementById('show').src=newsrc;
    }
    //建立一個可存取到該file的url
    function getObjectURL(file) {
    var url = null ;
    // 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已
    if (window.createObjectURL!=undefined) { // basic
    url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
    url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
    url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
    }
    </script>

  • 相关阅读:
    设计模式之建造者模式(简单)
    设计模式之简单工厂模式,工厂模式,抽象工厂模式
    设计模式之观察者模式
    Redis java操作客服端——jedis
    Redis基础
    java环境变量配置加maven配置
    设计模式之JDK动态代理
    springboot+mybatis+Thymeleaf
    OS问题管理系统开发
    复制CentOS虚拟机网络配置
  • 原文地址:https://www.cnblogs.com/llqwm/p/10302755.html
Copyright © 2011-2022 走看看