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. c语言中会遇到的面试题

    预处理器(Preprocessor) 1 . 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题)         #define SECONDS_PER_YEAR (60 ...

  2. SDUT 3375 数据结构实验之查找三:树的种类统计

    数据结构实验之查找三:树的种类统计 Time Limit: 400MS Memory Limit: 65536KB Submit Statistic Problem Description 随着卫星成 ...

  3. mysql存取blob类型数据

    参考网址:http://www.cnblogs.com/jway1101/p/5815658.html 首先是建表语句,需要实现将表建立好. CREATE TABLE `blobtest` ( `pr ...

  4. 转载-ActiveMQ通过JAAS实现的安全机制

    JAAS(Java Authentication and Authorization Service)也就是java认证/授权服务.这是两种不同的服务,下面对其做一些区别:验证(Authenticat ...

  5. Luogu2114 [NOI2014]起床困难综合症 【位运算】

    题目分析: 按位处理即可 代码: #include<bits/stdc++.h> using namespace std; ; int n,m; int a[maxn],b[maxn]; ...

  6. oracle 闪回区故障

    之前为了验证rman,把数据库改为了归档备份,但闪回区却还是4G,结果自动备份在五一执行了,悲剧,幸好没出门.一顿乱搞,其实走了错误方向.思路: 提示untle free,将数据库闪回区先增加:alt ...

  7. 吴裕雄 python 机器学习——等度量映射Isomap降维模型

    # -*- coding: utf-8 -*- import numpy as np import matplotlib.pyplot as plt from sklearn import datas ...

  8. SQL sum和group by HAVING

    Aggregate functions (like SUM) often need an added GROUP BY functionality. 集合函数(类似SUM)经常需要用GROUP BY来 ...

  9. apache2.4.X虚拟主机配置

    1,用记事本打开apache目录下httpd文件(如:D:\wamp\bin\apache\apache2.2.8\conf),找到如下模块       # Virtual hosts     #In ...

  10. linux read和write

    int write(int fd, const void *buf, size_t count); 如果是堵塞fd,则返回值是count,或者是0,-1: 如果是非堵塞fd,则返回值是写入的字节数,或 ...