JS+file控件实现图片的上传和预览

原创 2015年07月10日 16:56:23
复制代码
<form enctype="multipart/form-data" name="form1">
    <input id="f" type="file" name="f" onchange="change()" />
    <div class="upload">上传图片</div>
    <p>预览:</p>
    <p>
        <img id="preview" alt="" name="pic" />
    </p>
</form>
复制代码
JS代码如下:
 
复制代码
function change() {
    var pic = document.getElementById("preview"),
        file = document.getElementById("f");
 
    var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
 
     // gif在IE浏览器暂时无法显示
     if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
         alert("图片的格式必须为png或者jpg或者jpeg格式!"); 
         return;
     }
     var isIE = navigator.userAgent.match(/MSIE/)!= null,
         isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;
 
     if(isIE) {
        file.select();
        var reallocalpath = document.selection.createRange().text;
 
        // IE6浏览器设置img的src为本地路径可以直接显示图片
         if (isIE6) {
            pic.src = reallocalpath;
         }else {
            // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现
             pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
             // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
             pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
         }
     }else {
        html5Reader(file);
     }
}
 
 function html5Reader(file){
     var file = file.files[0];
     var reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = function(e){
         var pic = document.getElementById("preview");
         pic.src=this.result;
     }
 }

相关文章推荐

js控制图片上传预览,使用三方插件+名称显示和控件非display:none隐藏

第一次写blog,只是为了自己做记录,方便下次寻找方便,如有不足处见谅。 js三方引用,v1.4,附件下载http://jquery.decadework.com     html部分 ...

JS input file图片上传预览效果

首先,可以先了解file 和FileReader 的API,在选取一个或者多个文件之后,访问到代表了所选文件的一个或多个File对象,这些对象被包含在一个FileList对象中。所有type属性(at...

H5实现多图片预览上传,可点击可拖拽控件介绍

在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到上传框直接上传,方便,好用,接口也简单,基本可以直接放到项目里使用。 先看看他的样式: ...

js实现图片上传预览

  • 2014年04月11日 11:49
  • 8KB
  • 下载

js实现图片上传预览功能

  • 2013年05月29日 14:41
  • 3KB
  • 下载

input file 实现上传预览图片,以base64上传,兼容IE8+,firefox,chrome

前言 最近在公司开发一个项目,其中涉及到一个工能,主要是上传一些小图片,而且在网站上需要大量引用这个小图片的,对于上传一些小的头像等。一开始觉得直接上传就好了,但是发现这样子的话,一个小图片就会发送一...

原生JS实现图片上传前的预览

  • 2017年03月14日 17:21
  • 3KB
  • 下载

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

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

浏览器图片选择预览、旋转、批量上传的JS代码实现

工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本 其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点: 1. IE input type=file的图...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS+file控件实现图片的上传和预览
举报原因:
原因补充:

(最多只允许输入30个字)