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>

  • 相关阅读:
    c# in deep 之LINQ简介(1)
    今天开通博客
    bzoj 4009 接水果 整体二分
    区间求mex的几种方法
    充分性,必要性,充分条件,必要条件的区别
    表达式求值(noip2015等价表达式)
    selenium-模拟鼠标
    selenium学习-ActionChains方法列表
    高手指导中手的书籍
    新生
  • 原文地址:https://www.cnblogs.com/llqwm/p/10302755.html
Copyright © 2011-2022 走看看