上传图片前不上传预览?

原创 2016年08月31日 10:50:08
<body>
<script type="text/javascript">
            //下面用于图片上传预览功能
            function setImagePreview(avalue) {
                var docObj = document.getElementById("doc");
                var imgObjPreview = document.getElementById("preview");
                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>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tbody>
                <tr>
                    <td height="101" align="center">
                             <img id="preview" src="" width="100" height="100" style="display: block;border: 1px solid blue;" />
                    </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="width:150px;" onchange="javascript:setImagePreview();">
                    </form>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

js实现上传图片--上传前预览图片

上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出...

SpringMVC批量上传图片,实现上传前图片预览

最近有个功能需要实现批量上传图片,然后实现图片预览,因为项目比较老,同时对界面和用户操作体验也要求不太高,就没去找网上的开源插件,直接写了个简单的功能,这里做个记录备份因为这个是实验性的小代码,就没做...

java使用FileReader上传图片,可支持预览,支持多张上传

效果图: html代码: 上传照片:                             &...

实时预览上传图片(QQ上传头像前的预览)

上传到服务器之前的本地预览,提高响应速度,用户交互友好 function preview(file) { var prevDiv = document.getElementById('pre...

js上传图片预览,php后台接收实例,已改写为多图上传预览

上传图片预览这个出自超实用的js代码段,关于图片的处理那一章,php后台接收是网上比较少这方面的资源或者写得很复杂,这里简单记录。都是基于js 首先先调用两个文件夹animateManage.js和v...

一个投机取巧的上传图片前预览

最近一直在找BS端的图片上传前进行预览,试了WebUploader,浏览器兼容性挺好,但是,,,在IE浏览器的兼容模式下,就不能用了,所以排除了,而且,不清楚怎么获取图片的原本宽高,以后再看看吧。。。...

JavaScript上传图片前预览

JavaScript上传图片前预览border
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)