zoukankan      html  css  js  c++  java
  • javscript上传图片前预览的方法setPreViewImage()

    <!doctype html>
    <html lang="en">
     <head>
     <meta charset="UTF-8">
     <meta name="Generator" content="EditPlus?">
     <meta name="Author" content="">
     <meta name="Keywords" content="">
     <meta name="Description" content="">
     <title>Document</title>
     </head>
     <body>
     <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 = '150px'; 
        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 = "150px"; 
        localImagId.style.height = "120px"; 
        /*图片异常的捕捉,防止用户修改后缀来伪造图片*/ 
    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> 
    <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>
  • 相关阅读:
    [LeetCode] 273. Integer to English Words 整数转为英文单词
    What happens when you type an URL in the browser and press enter?
    HTTP Status Code
    What's binary search?
    [Http] Difference between POST and GET?
    [LeetCode] 53. Maximum Subarray 最大子数组
    [LeetCode] 621. Task Scheduler 任务调度
    C# web项目添加*.ashx文件后报错处理
    Web项目和Windows应用程序的配置文件
    C#中web项目使用log4net日志
  • 原文地址:https://www.cnblogs.com/laijie/p/4745808.html
Copyright © 2011-2022 走看看