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>

  • 相关阅读:
    同步的原则
    我心中的final
    令人"哇"的内部类(一)内部类的设计意义
    令人"哇"的内部类(三)嵌套类
    共享资源问题的解决方案(一)加锁机制
    令人"哇"的内部类(二 )内部类访问外围类
    volatile关键字
    同步控制块
    高质量C++/C 编程指南一
    5、数据表的创建与更新(续)
  • 原文地址:https://www.cnblogs.com/pear-liang/p/6074634.html
Copyright © 2011-2022 走看看