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

    网址http://jingyan.baidu.com/article/215817f78370dd1edb142372.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>

    <script type="text/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;

                }

            </script>

  • 相关阅读:
    软件测试相关面试
    GET和POST两种基本请求方法的区别
    Fiddler的安装与使用
    idea与eclipse项目相互导入的过程
    Selenium 学习笔记
    面试相关的案例
    idea编译启动报错
    window安装redis无法启动报错
    【001】接口测试-常用工具介绍和使用
    pyinstaller 打包exe相关
  • 原文地址:https://www.cnblogs.com/pear-liang/p/6074634.html
Copyright © 2011-2022 走看看