网上这样的插件一大堆,不过还是谈下js下代码的实现,加深这方面的理解。

当然也没有一种方式就可以完事的情形,主要就两种方面来处理;

1、file API的filereader接口完成(支持的浏览器:Internet Explorer: 10+ Firefox: 10+ Chrome: 13+ Opera: 12+ Safari: partial)

function show(obj_input){

var files = this.files;
var file = files[0]; var reader = new FileReader(), htmlImage; reader.onload = function(e) { htmlImage = '<img src="'+ e.target.result +'" id="image"/>'; // 这里e.target.result就是base64编码 document.innerHTML=htmlImage; var img=document.getElementById('image'); img.onload=function(){
img.style.width=220+"px";
img.style.height=120+"px";
} } reader.readAsDataURL(file);//以DataURL格式读取文件内容
}

这个方面网址(https://segmentfault.com/a/1190000002786372)上面的介绍得比较详细,可以参考一下。

2、ie低版本用ie滤镜完成

 function show(obj_input){

 //obj_input文件上传控件对象,obj_img图像对象,preview_div预览图装载div对象

 obj_input.select();

 obj_input.blur();//让上传控件失去焦点,以免ie的安全机制拒绝document.selection.createRange().text的访问
//还有一种情况是,如果当前页面被嵌在框架中,则fileImg.blur()之后,file控件中原本被选中的文本将会失去选中的状态,因此,不能使用fileImg.blur()。
可以让当前页面上的其他元素,如div,button等获得焦点即可,如div_view.focus(),或者直接用window.parent.docuemnt.body.focus().
var src = document.selection.createRange().text; var div_sFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + src + "')";
var img_sFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='" + src + "')"; document.selection.empty(); obj_img.style.filter = img_sFilter; obj_img.style.display = "none"; obj_img.style.width = "100%"; obj_img.style.height = "100%"; preview_div.style.width = 220 + 'px'; preview_div.style.height = 120 + 'px'; preview_div.style.filter = div_sFilter;
}

ie6、7、8都可以用滤镜的方式完成预览。

js前台实现上传图片的预览的更多相关文章

  1. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  2. js上传图片及预览功能

    详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...

  3. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

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

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

  5. 项目总结07:JS图片的上传预览和表单提交(FileReader()方法)

    JS图片的上传预览和表单提交(FileReader()方法) 一开始没有搞明白下面这块代码的,今天有时间简单整理下 核心点:FileReader()方法 以下是代码(以JSP文件为例) <!DO ...

  6. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

  7. 基于Three.js的360X180度全景图预览插件

    基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10  HTML5中国 原文  http://www.html5cn.org/article-8621-1 ...

  8. js实现移动端图片预览:手势缩放, 手势拖动,双击放大...

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  9. js上传图片前预览方法(支持预览多个图片)

    运用js实现上传图片前的预览(支持多张图片),实现的例子如下: 1.源码例子: 1)Js脚本页面 <!doctype html> <html> <head> < ...

随机推荐

  1. GCC 7.3.0版本编译http-parser-2.1问题

    http-paser是一个用c编写的http消息解析器,地址:https://github.com/nodejs/http-parser,目前版本2.9 今天用gcc 7.3.0编译其2.1版本时,编 ...

  2. prim和kruskal算法

    //邻接矩阵 int n,G[MAXV][MAXN]; int d[MAXV];//表示到树的距离 bool vis[MAXV]={false}; int prim(){ fill(d,d+MAXV, ...

  3. input标签的按钮效果

    https://codepen.io/anon/pen/EOPMNy <div class="row"> <p>Click every input.< ...

  4. Node.js des加密

    常见的加密算法基本分为这几类,1 :线性散列算法.2:对称性加密算法.3.非对称性加密算法 (记记记) 线性散列算法(签名算法):MD5,SHA1,HMAC比如MD5:即Message-Digest ...

  5. Druid SQL 解析器概览

    概览 Druid 的官方 wiki 对 SQL 解析器部分的讲解内容并不多,但虽然不多,也有利于完全没接触过 Druid 的人对 SQL 解析器有个初步的印象. 说到解析器,脑海里便很容易浮现 par ...

  6. Hibernate 集合映射

    Set映射: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE hibernate-mappi ...

  7. org.springframework.web.util.NestedServletException: Request processing failed; nested exception is org.springframework.beans.BeanInstantiationException: Failed to instantiate [org.jboss.resteasy.plug

    之前做的项目是resteasy的上传,代码没有问题,断点都不进来呢. 我以为可以直接移植到SpringMVC,但是SpringMVC不支持MultipartFormDataInput , 用Multi ...

  8. java 如何下载jar包

    随着maven工具的使用,我们已经不再需要辛苦的找jar包,也不需要再买会员去下载jar包,但是还有一些同学,不知道怎么下载jar包,下面我给大家介绍一下,如何潇洒的找到自己想要的jar包. 首先,访 ...

  9. Linux文件夹和文件创建删除命令

    Linux删除文件夹命令 linux删除目录很简单,很多人还是习惯用rmdir,不过一旦目录非空,就陷入深深的苦恼之中,现在使用rm -rf命令即可.直接rm就可以了,不过要加两个参数-rf 即:rm ...

  10. 兼容ie6的ul水平居中对齐

    ---恢复内容开始--- margin可以为负数左移动. padding不可以. ---恢复内容结束---