zoukankan      html  css  js  c++  java
  • JS上传图片本地实时预览缩略图

    HTML 代码如下 
    <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td height="101" align="center"> <div id="localImag" style="border: 1px solid red;"> <img id="preview" src="" width="100" height="100" style="display: block;border: 1px solid blue;" /> </div> </td> </tr> <tr> <td align="center" style="padding-top:10px;"> <form method="get" action="xznetwork" name="textfile"> <input type="file" name="file" id="doc" multiple="multiple" style="150px;" onchange="javascript:setImagePreview();"> </form> </td> </tr> </tbody> </table> </body>
    JavaScript 代码如下
    
    
    //下面用于图片上传预览功能
    function setImagePreview(avalue) {
        //input
        var docObj = document.getElementById("doc");
        //img
        var imgObjPreview = document.getElementById("preview");
        //div
        var divs = document.getElementById("localImag");
            if (docObj.files && docObj.files[0]) {
                //火狐下,直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '100px';
                imgObjPreview.style.height = '100px';
                //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 = "100px";
                localImagId.style.height = "100px";
                //图片异常的捕捉,防止用户修改后缀来伪造图片
                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;
    }
  • 相关阅读:
    《构建之法》4、17章精读
    2016012005+小学四则运算练习软件项目报告
    Week2-作业一——《构建之法》三章精读之想
    虚拟到现实
    脚踏实地,莫问前程
    2016012010 赵瑞雪 散列函数的应用及其安全性
    结对项目报告
    《构建之法》第四章、第十七章读书笔记
    2016012010+小学四则运算练习软件项目报告
    《构建之法》第一、二、十六章读书笔记
  • 原文地址:https://www.cnblogs.com/chen-lhx/p/5016526.html
Copyright © 2011-2022 走看看