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读取本地图片并显示

js学习
  • qiulei_21
  • qiulei_21
  • 2016年10月11日 09:42
  • 14476

EasyUI上传图片,前台预览,后台读取

Spring MVC下,结合EasyUI上传图片,并可以前台预览,后台保存图片路径到数据库,保存文件到服务器WebContent路径下...
  • u010137431
  • u010137431
  • 2015年06月19日 00:46
  • 16773

用javascript实现图片上传并预览

最近在开发的过程中遇到了一个图片上传并预览的问题。其实这问题不难。chrome,FF,IE10+可以用FileReader来实现。IE9-可以用css的滤镜来实现。一开始我也是这样干了。但是测试的时候...
  • baidu_24024601
  • baidu_24024601
  • 2016年04月28日 17:34
  • 5556

Uploadify 控件上传图片 + 预览

jquery的Uploadify控件上传图片和预览使用介绍。    在简单的servlet系统中和在SSH框架中,后台处理不同的,在三大框架中图片预览时费了不少力气,所以下面将两种情况都介绍一下。  ...
  • lishuangzhe7047
  • lishuangzhe7047
  • 2014年12月08日 14:54
  • 21336

实现图片上传预览和取消文件上传功能

问题由来:自己开发的一个预约系统要实现上传图片预览,自己费了九牛二虎之力,加上查资料才实现功能。下面我的实现思路。 预览功能: 1.首先需要定义一个事件,这个文件选择框发生改变,就触发这个方法,我这里...
  • lkwan123
  • lkwan123
  • 2017年06月01日 15:51
  • 1102

html5以及jQuery实现本地图片上传前的预览

html5与jQuery实现预览本地图片
  • YQXLLWY
  • YQXLLWY
  • 2016年09月08日 13:33
  • 8509

菜鸟学JS(一)——上传图片之上传前预览图片

上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出...
  • liushuijinger
  • liushuijinger
  • 2013年03月25日 09:38
  • 14628

图片上传预览原理及实现

目前网上有很多支持图片上传时进行预览的插件,功能完备,界面优雅,使用起来也很方便。一直以来也就只是用用,没有想过这些插件背后的实现原理。趁着今天有点时间,也来学习学习。 追根溯源 设...
  • zy_281870667
  • zy_281870667
  • 2017年07月11日 10:01
  • 713

HTML实现图片上传前预览

HTML5 Upload #destination{ filter:progid:DXImageTransform.Microsoft.AlphaImageL...
  • name_liweibin
  • name_liweibin
  • 2014年04月28日 17:56
  • 2346

图片上传实时预览效果

图片上传实时预览效果
  • qq_28975017
  • qq_28975017
  • 2017年06月23日 00:57
  • 749
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS+file控件实现图片的上传和预览
举报原因:
原因补充:

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