zoukankan      html  css  js  c++  java
  • html 上传图片前预览

    <!DOCTYPE html>  
    <html>  
    <head>  
    <title>HTML5上传图片预览</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>  
    </head>  
    <body>  
    <h3>请选择图片文件:JPG/GIF</h3>  
    <form name="form0" id="form0" >  
    <!-- 这里特别说一下这个 multiple="multiple" 添加上这个之后可以一次选择多个文件进行上传,是 html5 的新属性-->  
    <input type="file" name="file0" id="file0" multiple="multiple" accept="image/*" /><br><img src="" id="img0" >  
    </form>  
    <script>    
    $("#file0").change(function(){  
      // getObjectURL是自定义的函数,见下面  
      // this.files[0]代表的是选择的文件资源的第一个,因为上面写了 multiple="multiple" 就表示上传文件可能不止一个  
      // ,但是这里只读取第一个 
      console.log(this.files);
      var objUrl = getObjectURL(this.files[0]) ;  
      // 这句代码没什么作用,删掉也可以  
      // console.log("objUrl = "+objUrl) ;  
      if (objUrl) {  
        // 在这里修改图片的地址属性  
        $("#img0").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>  
    </body>  
    </html>
  • 相关阅读:
    防火墙2
    SVN:多版本库环境的搭建
    安装SVN服务端
    springContext
    linux centos7安装 mysql-5.7.11
    ajax struts2 前后台 交互
    Spring的 classpath 通配符加载配置文件
    使用甘特图实现服务计划的可视化
    条形码软件开发包Dynamic .NET TWAIN v5.0提供WPF功能
    快来玩“Gift大转盘”百分百赚好礼
  • 原文地址:https://www.cnblogs.com/zjj1990/p/8888577.html
Copyright © 2011-2022 走看看