zoukankan      html  css  js  c++  java
  • JQ实现图片上传预览功能

    <input type="file"  name="img" id="test1">
    
    <img src=""  id="demo1">

    js代码如下:

    <script>
    // 图片预览功能
    $("#test1").change(function(){  
      // getObjectURL是自定义的函数,见下面  
      // this.files[0]代表的是选择的文件资源的第一个,因为上面写了 multiple="multiple" 就表示上传文件可能不止一个  
      // ,但是这里只读取第一个   
      var objUrl = getObjectURL(this.files[0]) ;  
      if (objUrl) {  
        // 在这里修改图片的地址属性  
        $("#demo1").attr("src", objUrl) ;  
      }  
    }) ;  
    //建立一個可存取到該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>


    //效果图:





  • 相关阅读:
    Python类知识点
    安装psycopg2时出错:Error: pg_config executable not found.
    top命令
    Ubuntu18.10创建软件图标
    初始化Redis密码
    Ubuntu修改root密码,ssh 允许root用户登录
    Flask_Migrate数据库迁移
    Ubuntu18.04 systemd开机自启
    dnspython
    记一次Celery的仇
  • 原文地址:https://www.cnblogs.com/pyspang/p/9303741.html
Copyright © 2011-2022 走看看