zoukankan      html  css  js  c++  java
  • 本地上传图片预览效果

    资源来之网络

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>js特效实现图片上传前的预览效果(支持IE,FF火狐等浏览器)</title>
    <script> 
    function setImagePreview() { 
    var docObj=document.getElementById("doc"); 
    var imgObjPreview=document.getElementById("preview"); 
    if(docObj.files && docObj.files[0]){ 
    //火狐下,直接设img属性 
    imgObjPreview.style.display = 'block'; 
    imgObjPreview.style.width = '300px'; 
    imgObjPreview.style.height = '120px'; 
    //imgObjPreview.src = docObj.files[0].getAsDataURL(); 
    //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式 
    imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); 
    }else{ 
    //IE下,使用滤镜 
    docObj.select(); 
    var imgSrc = document.selection.createRange().text; 
    var localImagId = document.getElementById("localImag"); 
    //必须设置初始大小 
    localImagId.style.width = "250px"; 
    localImagId.style.height = "200px"; 
    //图片异常的捕捉,防止用户修改后缀来伪造图片 
    try{ 
    localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; 
    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; 
    }catch(e){ 
    alert("您上传的图片格式不正确,请重新选择!"); 
    return false; 
    } 
    imgObjPreview.style.display = 'none'; 
    document.selection.empty(); 
    } 
    return true; 
    } 
    </script> 
    </head>
    <body>
    
    <input type=file name="doc" id="doc" onchange="javascript:setImagePreview();"> 
    <p><div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div></p>
    </body>
    </html>
    
    本地图片预览


    通过分享,结交好友~ 如本文对您有益,请给予关注。转载请注明出处!-- 小数
  • 相关阅读:
    剑指Offers 题目1384:二维数组中的查找
    剪切板获取图片并上传
    VSCode TSlint + Prettier 实现代码的格式化
    Element Table 合并列
    Linux下安装Redis
    transfer 增加拖拽排序组件封装
    在VSCode中使用Git处理文件冲突(pull不能从服务器拉取代码)
    Vue的 transition在v-for的嵌套下怎么用
    Vant的picker组件放在popup中,导致ref获取不到
    小工具
  • 原文地址:https://www.cnblogs.com/mcat/p/4667644.html
Copyright © 2011-2022 走看看