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>

  • 相关阅读:
    [转]vim 常用命令
    C语言运算符优先级顺序
    uboot
    linux 驱动开发 不定期更新
    [转]spdk 和nvme 预备知识1
    【转】聊聊 Linux IO
    [转]NVMe协议/ SSD控制器/ linux driver / open channel
    Ubuntu给应用程序创建一个启动图标
    Qt4.8.7+mingw4.8.2 环境搭建
    更改C编译器的缺省字节对齐方式__align(),__attribute((aligned (n))),#pragma pack(n)
  • 原文地址:https://www.cnblogs.com/pear-liang/p/6074634.html
Copyright © 2011-2022 走看看