IE7+ 浏览器兼容预览本地图片
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+ 浏览器兼容预览本地图片的更多相关文章
- vue预览本地图片
<template> <div> <a href="javascript:void(0);" @change="addImage" ...
- 预览本地图片原生js
<!-- 样似总结: 用a标签代替file,做文件上传. 将file进行绝对定位,透明度设置为0:宽度为“上传图片”的宽度,超出部分隐藏. 这样做是为了将file隐藏起来.用a标签代替file ...
- javascript预览本地图片
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery预览本地图片
本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群: 281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29Lo ...
- 基于HTML5的可预览多图片Ajax上传
一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...
- es5预览本地文件、es6练习代码演示案例
es6简单基础: <!DOCTYPE html> <html> <head> <meta name="viewport" content= ...
- HTML5可预览多图片ajax上传(使用formData传递数据)
HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...
- input type=file实现图片上传,预览以及图片删除
背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...
- 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器
前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...
随机推荐
- spark sql的应用场景
最近一直在银行做历史数据平台的项目,目前整个项目处于收尾的阶段,也好有时间整理下在项目中的一些收获. 该历史数据平台使用spark+Nosql架构了,Nosql提供了海量数据的实时查询,而spark提 ...
- android studio中使用recyclerview小白篇(一)
本人就是小白,昨天在使用listview时,看到说有更好的控件出来了,在V7包中,需要SDK21及以上,那就试着用用吧,今天试了一天,终于弄的能简单使用了,分享一下. 怎么导入这个recycleyvi ...
- CentOS 6.7中安装python3.5
1.安装一些依赖的软件包 yum groupinstall "Development tools" yum install zlib-devel bzip2-devel opens ...
- 简单配置webpack4 + vue
1.创建webpack4-vue文件夹 mkdir webpack4-vue && cd webpack4-vue 2.初始化npm npm init -y 3.安装相关依赖 npm ...
- 安卓手机牛逼软件Termux中安装Archlinux,安装Jdk
说出来你可能不信,手机上居然装了两个linux系统,和真实的linux有些许些差别. 首先安装了Termux以后你发现,好多linux常用功能都有,什么Pyhton,gcc,g++,ruby,Php, ...
- 洛谷P2526 [SHOI2001]小狗散步(二分图匹配)
题目背景 Grant喜欢带着他的小狗Pandog散步.Grant以一定的速度沿着固定路线走,该路线可能自交.Pandog喜欢游览沿途的景点,不过会在给定的N个点和主人相遇.小狗和主人同时从(X1,Y1 ...
- LB 负载均衡的层次结构(转)
http://blog.csdn.net/mindfloating/article/details/51020767 作为后端应用的开发者,我们经常开发.调试.测试完我们的应用并发布到生产环境,用户就 ...
- swift -- 单例+ lazy懒加载 + 第三方库
//工具类单例 static let goods : NHGoods = { let good = NHGoods() return good }() //懒加载 lazy var registerB ...
- flex item的width VS flex-basis
flexbox的子元素flex item的宽度,按照以下规则计算: content>width>flex-basis(limited by max/min-width) flex-basi ...
- eclipse项目中的java文件导入后变为空心J问题
1,选择工程名字右键——>属性——>JavaBuild Path会看到右侧Source标签中为空白 2,点击Add Folder...选择如图所示的src包和相关的配置文件包,点击确定: ...