css

#preview_fake {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
overflow: hidden;
}

html

<div class="row">
<div id="preview_fake"></div>
<input type="file" name="uploadFile" onchange="previewImage(this)" />
</div>

js

//图片上传预览    IE是用了滤镜
function previewImage(file)
{
var self = $(file); //判断图片格式
if(!/\.(jpg|jpeg|png|JPG|PNG)$/.test(self.val())) {
imgErr(self,"请上传JPG或PNG格式的图片");
return false;
}
var objPreviewFake = document.getElementById('preview_fake');
if (file.files && file.files[0])
{ //ie10以上火狐谷歌支持
var fileData = file.files[0];
var size = fileData.size;
var reader = new FileReader(); //判断图片文件大小不能大于2M
if(size>0) {
if (size > 2000 * 1024) {
imgErr(self,"上传文件大小不可以超过2M");
return false;
}
}
var reader = new FileReader();
reader.readAsDataURL(file.files[0]);
reader.onload = function(evt){
$('<img onclick="openBig(this)" src="' + this.result +'" class="imghead qsc_img_circle">').appendTo(div);
//修改上传按钮文字
self.next().find(".qsc_img_btn").text("重新上传");
//初始化图片收缩放大
$(".imghead").zoomify();
};
var img = self.prev(".qsc_img").find('imghead'); } else if ( objPreviewFake.filters ) //兼容IE,滤镜
{
// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
//(相同环境有时能显示,有时不显示),因此只能用滤镜来解决
// IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
file.select();
var imgSrc = document.selection.createRange().text;
$("#preview_fake").css({"width":"50px","height":"50px","margin-right":"140px"});
objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc; }
}

IE7+ 浏览器兼容预览本地图片的更多相关文章

  1. vue预览本地图片

    <template> <div> <a href="javascript:void(0);" @change="addImage" ...

  2. 预览本地图片原生js

    <!-- 样似总结: 用a标签代替file,做文件上传. 将file进行绝对定位,透明度设置为0:宽度为“上传图片”的宽度,超出部分隐藏. 这样做是为了将file隐藏起来.用a标签代替file ...

  3. javascript预览本地图片

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. jquery预览本地图片

    本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29Lo ...

  5. 基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...

  6. es5预览本地文件、es6练习代码演示案例

    es6简单基础: <!DOCTYPE html> <html> <head> <meta name="viewport" content= ...

  7. HTML5可预览多图片ajax上传(使用formData传递数据)

    HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

  8. input type=file实现图片上传,预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  9. 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器

    前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...

随机推荐

  1. super-smack

    我有个办法,不过不是用LR,是用super-smack,如果只对数据库进行抗压力测试,应该管用.Super-smack 现在是1.3版,源码下载地址如下:http://vegan.net/tony/s ...

  2. Fragment之间通过add切换时的显示与隐藏

    新手,不知道用什么方法实现 ,通过动态的方法显示了Fragment   A,在这个里面点击列表项时add方法动态加载Fragment  B,但是两者都会一起显示,重叠在一起了,如果用replace方法 ...

  3. linux 进程间通信机制(IPC机制)- 管道

    一,定义: 管道又可以分为无名管道和命名管道,两者的用途是不一样的. 无名管道PIPE:主要用于具有亲缘关系的进程之间的通信,无名管道的通信是单向的,只能由一段到另外一段:无名管道是临时性的,完成通信 ...

  4. 【C#】如何打开Model Browser(实体数据模型浏览器)

    Visual Studio 2017 如何打开Model Browser(实体数据模型浏览器) 2017-10-11 十有三 2 浏览:4956 开发工具 Visual Studio 做个笔记,记录下 ...

  5. The working copy "Test" failed to commit files.问题解决

    1.产生来源及现象 1.1 来源:往图片资源中替换旧图片资源,导致与原来的图片产生冲突. 1.2 原因分析 2.解决办法 删了重新加一下就可以提交了

  6. 对接极光IM之修改头像

    因为项目中使用了极光IM,在对接极光的时候,发现了如果想要在改变自己个人中心的头像同时改变极光IM的头像,就必须要将本地磁盘的文件上传到极光服务器,根据反馈的media_id来进行修改头像. 但是因为 ...

  7. C#中==与equal的区别

    值类型是存储在内存中的堆栈(以后简称栈),而引用类型的变量在栈中仅仅是存储引用类型变量的地址,而其本身则存储在堆中. ==操作比较的是两个变量的值是否相等,对于引用型变量表示的是两个变量在堆中存储的地 ...

  8. 关于如何在Windows下测交互题

    这里的交互题指的NOI风格的交互题,即交互库 codeforces风格的交互题...只能自己实现评测插件了 使用Cena,Lemon没有附加文件功能不能评测交互题 在编译选项g++编译命令源文件中加入 ...

  9. vue.js组件之j间的通讯二

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  10. LUNA16数据集(二)肺结节可视化

    在检测到肺结节后,还需要可视化,这样才能为诊断服务. 我使用的项目地址为:https://github.com/wentaozhu/DeepLung 项目基于论文:DeepLung: Deep 3D ...