• 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>

  • 相关阅读:
    react 实现路由按需加载
    vue-router 与 react-router 设计理念上的区别
    create-react-app 知识点
    ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别
    create-react-app 搭建的项目中,让 antd 通过侧边栏导航 Menu 的 Menu.Item 控制 Content 部分的变化
    react-router v4.0 知识点
    prop-types:该第三方库对组件的props中的变量进行类型检测
    002_mtr_a network diagnostic tool
    006_netstat中state详解
    003_监测域名证书过期时间
  • 原文地址:https://www.cnblogs.com/pear-liang/p/6074634.html
Copyright © 2020-2023  润新知