zoukankan      html  css  js  c++  java
  • JS获取图片的缩略图

    js获取上传文件的缩略图

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery File Upload Demo - AngularJS version</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    .btn{
    
    }
    
    .addfiles{
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor:pointer;
    background-image: none;
    border:1px solid transparent;
    white-space: nowrap;
    padding:6px 12px;
    font-size:14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    margin-bottom:5px;
    position: relative;
    overflow: hidden;
    color:#FFF;
    background-color: #5CB85C;
    border-collapse: #4CAE4C;
    }
    
    .addfiles:hover, .addfiles:focus, .addfiles:active{
    color:#FFF;
    background-color: #47A447;
    border-color:#398439;
    text-decoration: none;
    }
    
    .addfiles:active{
    outline:0;
    background-image: none;
    -webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
    box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
    }
    
    .addfiles input{
    position: absolute;
    top:0;
    right:0;
    margin:0;
    opacity: 0;
    -ms-filter:'alpha(opacity=0)';
    font-size: 200px;
    direction: ltr;
    cursor:pointer;
    display: block;
    }
    
    </style>
    <script>
    function change(v){
    getPath2(document.getElementById("img"),v,v.value);
    }
    //附带不用修改浏览器安全配置的javascript代码,兼容ie, firefox全系列
    function getPath2(obj,fileQuery,transImg){
    if(window.navigator.userAgent.indexOf("MSIE")>=1){
    //obj.select();
    //var path = document.selection.createRange().text;
    //obj.removeAttribute("src");
    //obj.setAttribute("src",path);
    obj.setAttribute("src",transImg);
    //obj.style.filter= "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path+"', sizingMethod='scale');"; 
    }else{
    var file =fileQuery.files[0]; 
    var reader = new FileReader(); 
    reader.onload = function(e){
    obj.setAttribute("src",e.target.result)
    }
    reader.readAsDataURL(file); 
    }
    }
    </script>
    </head>
    <body>
    
    <span class="btn addfiles">
    <span>Add files...</span>
    <input id="file" type="file" name="files[]" onchange="change(this)"/>
    </span>
    <div>
    <img id="img" width="100px" height="100px" />
    </div>
    
    </body>
    </html>
    

      

  • 相关阅读:
    转: requirejs压缩打包r.js使用示例 2 (~~很详细的教程)
    转:requirejs打包压缩r.js使用示例
    转: RequireJS Optimizer 的使用和配置方法
    转:requirejs:让人迷惑的路径解析(~~不错)
    转: requirejs中文api (详细)
    转: 让html5标签在ie8及以下的被正确解析的解决方案
    浏览器对body节点scrollTop解析的差异
    vue全局配置
    vue watch 深度监听以及立即监听
    Vue插件
  • 原文地址:https://www.cnblogs.com/andysd/p/3693919.html
Copyright © 2011-2022 走看看