第一种方式
  1. <script type="text/javascript">
  2. function setImagePreview() {
  3. var docObj = document.getElementById("ctl00_ContentMain_file_head");
  4. var fileName = docObj.value;
  5. if (!fileName.match(/.jpg|.gif|.png|.bmp/i)) {
  6. alert('您上传的图片格式不正确,请重新选择!');
  7. return false;
  8. }
  9. var imgObjPreview = document.getElementById("preview");
  10. if (docObj.files && docObj.files[0]) {
  11. //火狐下,直接设img属性
  12. imgObjPreview.style.display = 'block';
  13. imgObjPreview.style.width = '63px';
  14. imgObjPreview.style.height = '63px';
  15. //imgObjPreview.src = docObj.files[0].getAsDataURL();
  16. if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) {
  17. imgObjPreview.src = window.webkitURL.createObjectURL(docObj.files[0]);
  18. }
  19. else {
  20. imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
  21. }
  22. } else {
  23. //IE下,使用滤镜
  24. docObj.select();
  25. docObj.blur();
  26. var imgSrc = document.selection.createRange().text;
  27. var localImagId = document.getElementById("localImag");
  28. //必须设置初始大小
  29. localImagId.style.width = "63px";
  30. localImagId.style.height = "63px";
  31. //图片异常的捕捉,防止用户修改后缀来伪造图片
  32. try {
  33. localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
  34. localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
  35. } catch (e) {
  36. alert("您上传的图片格式不正确,请重新选择!");
  37. return false;
  38. }
  39. imgObjPreview.style.display = 'none';
  40. document.selection.empty();
  41. }
  42. return true;
  43. }
  44. </script>



<div id="localImag"><img id="preview" width="-1" height="-1" style="display:none" /></div> 
<asp:FileUpload ID="file_head" runat="server" onchange="javascript:setImagePreview();" />

第二种方式

  1. function setImagePreview(a,b) {
  2. var url ='';
  3. if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
  4. url = document.getElementById(a).value;
  5. } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
  6. url = window.URL.createObjectURL(document.getElementById(a).files.item(0));
  7. } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
  8. url = window.URL.createObjectURL(document.getElementById(a).files.item(0));
  9. }
  10. var imgPre = document.getElementById(b);
  11. imgPre.src = url;
  12. }

a = fileid
b=imgid

浏览器 本地预览图片 window.url.createobjecturl的更多相关文章

  1. 本地预览图片html和js例子

    本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  2. FileReader本地预览图片

    <body> <p><label>请选择一个图像文件:</label><input type="file" id=" ...

  3. js 本地预览图片和得到图片实际大小

    //填充预览图片 function adpter(file, upfile) { var imgName = new Date().getTime() + file.name.substr(file. ...

  4. js在本地预览图片

    移动web <body> <form enctype="multipart/form-data" name="form1"> 上传文件: ...

  5. H5实现本地预览图片

    我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  6. js本地预览图片

    废话不说  直接上代码 <script type="text/javascript" src="http://code.jquery.com/jquery-late ...

  7. Thinkphp5+plupload图片上传功能,支持实时预览图片。

    今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...

  8. js图片前端预览之 filereader 和 window.URL.createObjectURL

    //preview img : filereader方式 document.getElementById('imgFile').onchange = var ele = document.getEle ...

  9. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

随机推荐

  1. INFORMATICA 的元数据管理之二:运行状态信息查询

    本项目里的两个哥们做的关于运行状态元数据的两个JOB挺酷的,最近一段时间运行状况良好,自己参考学习的同时以做日志记载,呵呵,为了节省笔墨,相关元数据表结构以及MAPPING设计之类不做介绍(如有疑问欢 ...

  2. python爬虫——利用BeautifulSoup4爬取糗事百科的段子

    import requests from bs4 import BeautifulSoup as bs #获取单个页面的源代码网页 def gethtml(pagenum): url = 'http: ...

  3. C#中使用SQLite数据库简介(下)

    [SQLite管理工具简介] 推荐以下2款: Navicat for SQLite:功能非常强大,几乎包含了数据库管理工具的所有必需功能,操作简单,容易上手.唯一的缺点是不能打开由System.Dat ...

  4. centos下docker网络桥接

    停止服务 停止docker0网卡 Ip link set dev docker0 down 删除docker0 Brctl delbr docker0 进入到网卡的配置文件创建桥接网络br0 Brct ...

  5. xcode 调试程序 lldb 使用

    xcode 调试程序 lldb 使用 一:lldb是什么 https://developer.apple.com/library/mac/documentation/IDEs/Conceptual/g ...

  6. Xcode 生成 ipa包

    原地址:http://zengwu3915.blog.163.com/blog/static/2783489720136213239916/ app store的审核收费的需要二周,免费的需要一个月左 ...

  7. 算法笔记_033:十六进制转八进制(Java)

    目录 1 问题描述 2 解决方案 2.1 注意问题 2.2 具体实现代码   1 问题描述 具体问题描述 给定n个十六进制正整数,输出它们对应的八进制数. 输入格式 输入的第一行为一个正整数n (1& ...

  8. Jquery重新学习之六[操作XML数据]

    上一章整理有关Jquery操作JSON格式数据,本章则是整理Jquery与XML的交互,因为XML简单易用及运用在很跨平台上的优点,所以项目运用Jquery操作XML还是比较常见:下面的代码来自Jqu ...

  9. 百度地图总结第二篇--POI检索功能

    简单介绍: 眼下百度地图SDK所集成的检索服务包含:POI检索.公交信息查询.线路规划.地理编码.行政区边界数据检索.在线建议查询.短串分享(包含POI搜索结果分享.驾车/公交/骑行/步行路线规划分享 ...

  10. 每日一Vim(1)

    来自 上一篇讲过了Vim的基本操作命令(打开,编辑,保存退出)以及Vim的三种基本模式和光标的基本导航(hjkl),今天讲一些稍微高级点的光标移动,以及一些基本的文本操作命令. 翻一页/半页 对于一个 ...