<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;" οnchange="javascript:setImagePreview();">
                    </form>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>

上传图片前不上传预览?相关推荐

  1. js实现图片上传预览功能

    js实现图片上传预览功能 很多业务场景下,我们需要在用户上传图片前,先预览待上传的图片 <body><input type="file"><img s ...

  2. C#实现winform下图片的上传预览保存以及在桌面应用系统的应用

    C#实现winform下图片的上传预览保存以及在桌面应用系统的应用 图片的上传.预览.保存操作在许多应用系统中经常需要用到,比如员工的头像即为一个典型的案例.在很多应用系统中,比如C#的B/S.C/S ...

  3. js实现图片上传预览及进度条

    js实现图片上传预览及进度条 原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...

  4. JavaScript 图片上传预览效果

    图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...

  5. ASP.NET工作笔记之一:图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  6. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  7. flash 图片剪切 php,flash + php头像上传预览裁剪组件1.8发_php

    安装及部署: 1. 上传到 apache,iis,Tomcat 服务器,通过域名访问 index.html v1.8 1.优化摄像头拍照不清晰(目前支持高清) v1.7 http://www.gaod ...

  8. html 手机qq图片预览,模拟QQ心情图片上传预览示例

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  9. java实现文件上传预览_jsp+springmvc实现文件上传、图片上传和及时预览图片

    1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...

最新文章

  1. 新手初学Regular Expression正则表达式--快速入门
  2. (如何从一个列表中随机抽样)np.random.choice(),random.sample()
  3. 12.figure/subplot多窗口技巧
  4. java bitmap jar_Java面试中常用的BitMap代码
  5. 挖掘经典:几乎被人遗忘的HTML七种用法 (转)
  6. Linux系统管理系列(1)——文件管理权限详解 chgrp chown chmod rwx等等
  7. GPS Programming Tips for Windows Mobile
  8. Mybatis和Spring整合逆向工程
  9. ctf解密图片得到flag_图片隐藏flag怎么找
  10. 【Excel】根据空格拆分单元格
  11. 最强nba体验服显示服务器正在停机,最强NBA体验服
  12. 从尾到头打印链表(C++和Python 实现)
  13. 【webpack】输入npm run dev报错: This is probably not a problem with npm. There is likely additional loggin
  14. anemometer mysql_MySQL慢日志简介及Anemometer工具介绍
  15. 如何给码农的Mac开光
  16. jsp页面兼容谷歌浏览器相关问题
  17. can转光纤 can光端机 总线式CAN光纤转换器用于消防主机长距离互联
  18. mysql hy000_Mysql ERROR 145 (HY000)
  19. excel插入页码_95后小姐姐打印Excel表格前做了1个步骤,工资直接从3000涨到6000!...
  20. 在无线网络下利用adb传输文件

热门文章

  1. 第四章 实验一 用类描述坦克
  2. hihocoder 闰秒
  3. 【学习进度】截至2022.9.6,已学习的C++知识
  4. 请尽快报名参加Imagine Cup 微软“创新杯”全球学生大赛
  5. Ubuntu 驱动Mecury MW150UH无线网卡总结
  6. 画【Python折线图】的一百个学习报告(三、设置全局 Label 颜色)
  7. 老祖宗的绝招对治腰疼,别说你没听过
  8. html页面怎么设置不能复制粘贴,网页禁止复制粘贴怎么办? 教你6招, 快速搞定
  9. 用Keil调试STM32F407ZET6时,出现no cortex-m sw device found报错!
  10. 【科普园地】郭雷院士:系统的反馈原理及魅力