您的位置:永利集团登录网址 > 计算机教学 > 透过createObjectU锐界L落成图片预览

透过createObjectU锐界L落成图片预览

2019-11-23 03:05

点评:这篇文章主要介绍了HTML5图片预览实例,需要的朋友可以参考下

当我们在上传文件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合理的,如果网速慢或图片有问题,这样不但浪费客户时间同时也浪费服务器资源了,下面我们介绍利用js上传图片时本地实现预览,希望此方法对各位有所帮助哦。

实现原理:通过createObjectURL 创建一个临时指向某地址的二进制对象。

HTML5图片预览需要用到两种方法

原理

过程:点击触发隐藏的 input   file  的点击事件,使用createObjectURL读取 file,创建一个Jquery 图片对象,url等于二进制对象。

    1.URL
    2.FileReader
直接上代码

分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL);把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来。

 

代码如下:

在这里,我们需要了解Javascript里File对象、Blob对象和window.URL.createObjectURL()方法。

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>html5 图片上传预览</title>
<style>
#preview {
width: 300px;
height: 300px;
overflow: hidden;
}
#preview img {
width: 100%;
height: 100%;
}
</style>
<script src="../jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
function preview1(file) {
var img = new Image(), url = img.src = URL.createObjectURL(file)
var $img = $(img)
img.onload = function() {
URL.revokeObjectURL(url)
$('#preview').empty().append($img)
}
}
function preview2(file) {
var reader = new FileReader()
reader.onload = function(e) {
var $img = $('<img>').attr("src", e.target.result)
$('#preview').empty().append($img)
}
reader.readAsDataURL(file)
}

File对象

前端代码:

$(function() {
$('[type=file]').change(function(e) {
var file = e.target.files[0]
preview1(file)
})
})
</script>
</head>
<body>
<form enctype="multipart/form-data" action="" method="post">
<input type="file" name="imageUpload"/>
<div id="preview" style="width: 300px;height:300px;border:1px solid gray;"></div>
</form>
</body>
</html>

File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个input元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象.

 

其中URL.revokeObjectURL方法Opera不支持,FileReader除IE9及以下不支持,其它浏览器都支持。

下面来看获取FileList对象:

js:  
        $(function () {
             $('[type=file]').change(function (e) {
                var file = e.target.files[0]
                preview(file, this);
            })
        });

 代码如下

    

复制代码

   //添加图片触发隐藏的  file input
            function upLoadImage(obj) {
                return $(obj).next().click();
            }

<script type="text/javascript" src="jquery.js"></script>

            //预览文件图片
            function preview(file, obj) {
                //浏览器缓存一张图片
                var img = new Image(), url = img.src = URL.createObjectURL(file);
                var $img = $(img);
                img.onload = function () {
                    URL.revokeObjectURL(url)

<input id="upload" type="file">
<img id="preview" src="">

                    var $parentBox = $(obj).parent().find(".imgBox");
                    alert(0);
                    $parentBox.html("");

<script type="text/javascript">
$('#upload').change(function(){
    // 获取FileList的第一个元素
    alert(document.getelementbyid('upload').files[0]);
});
</script>

                    $parentBox.css("width", "64");
                    $parentBox.css("height", "64");
                    $parentBox.append($img)
                    //$('#preview').empty().append($img)
                }
            }

Blob对象

 

一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件.

 //删除

我们想要得到的对象URL实际上就是从Blob这个对象获取的,因为File的接口继承Blob。下面就来把Blob对象转换成URL:

            function deleteimg(obj) {
                var objectBox = $(obj).parent().find(".imgBox");
                var file = $(obj).parent().find(".fileData");
                $(file).val('');
                objectBox.html("<img src='../..upload.png'>");
            }

 代码如下

 

复制代码

 

<script type="text/javascript">
var f = document.getelementbyid('upload').files[0];
var src = window.URL.createObjectURL(f);
document.getElementById('preview').src = src;
</script>

html:

一个比较完整的实例

   <td>
                              <div class="upload-img" style="float: left; margin-right: 25px">
                                            <a href="javascript:void(0);" onclick="upLoadImage(this)" class="upload-hotel-a">
                                                <div class="imgBox">
                                                    <img src="../..upload.png">
                                                </div>
                                            </a>
                                            <input type="file" style="display: none" />
                                            <br />
                                            <a onclick="deleteimg(this)" class="button icon trash DeleteTd">删除</a>
                                            <input type="hidden" value="">
                                </div>
            </td>

 

 

 代码如下

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Upload</title>
<style type="text/css">
        #destination{
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(true,sizingMethod=scale);
        }
</style>

<!--<script type="text/javascript" src=";
<script type="text/javascript" src=";
<script type="text/javascript">
//处理file input加载的图片文件
$(document).ready(function(e) {
 //判断浏览器是否有FileReader接口
 if(typeof FileReader =='undefined')
 {
    $("#destination").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口,无法使用图片本地预览,请更新浏览器获得最好体验');
  //如果浏览器是ie
  if($.browser.msie===true)
  {
   //ie6直接用file input的value值本地预览
   if($.browser.version==6)
   {
       $("#imgUpload").change(function(event){      
       //ie6下怎么做图片格式判断?
       var src = event.target.value;
       //var src = document.selection.createRange().text;  //选中后 selection对象就产生了 这个对象只适合ie
       var img = '<img src="'+src+'" width="200px" height="200px" />';
       $("#destination").empty().append(img);
      });
   }
   //ie7,8使用滤镜本地预览
   else if($.browser.version==7 || $.browser.version==8)
   {
    $("#imgUpload").change(function(event){
       $(event.target).select();
       var src = document.selection.createRange().text;
       var dom = document.getElementById('destination');
       //使用滤镜 成功率高
       dom.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= src;
       dom.innerHTML = '';
       //使用和ie6相同的方式 设置src为绝对路径的方式 有些图片无法显示 效果没有使用滤镜好
       /*var img = '<img src="'+src+'" width="200px" height="200px" />';
       $("#destination").empty().append(img);*/
     });
   }
  }
  //如果是不支持FileReader接口的低版本firefox 可以用getAsDataURL接口
  else if($.browser.mozilla===true)
  {
   $("#imgUpload").change(function(event){
    //firefox2.0没有event.target.files这个属性 就像ie6那样使用value值 但是firefox2.0不支持绝对路径嵌入图片 放弃firefox2.0
    //firefox3.0开始具备event.target.files这个属性 并且开始支持getAsDataURL()这个接口 一直到firefox7.0结束 不过以后都可以用HTML5的FileReader接口了
    if(event.target.files)
    {
      //console.log(event.target.files);
      for(var i=0;i<event.target.files.length;i++)
      { 
         var img = '<img src="'+event.target.files.item(i).getAsDataURL()+'" width="200px" height="200px"/>';
       $("#destination").empty().append(img);
      }
    }
    else
    {
     //console.log(event.target.value);
     //$("#imgPreview").attr({'src':event.target.value});
    }
    });
  }
 }
 else
 {
  // version 1
  /*$("#imgUpload").change(function(e){
    var file = e.target.files[0];
    var fReader = new FileReader();
    //console.log(fReader);
    //console.log(file);
    fReader.onload=(function(var_file)
    {
     return function(e)
     {
      $("#imgPreview").attr({'src':e.target.result,'alt':var_file.name});
     }
    })(file);
    fReader.readAsDataURL(file);
    });*/
   
    //单图上传 version 2
    /*$("#imgUpload").change(function(e){
       var file = e.target.files[0];
       var reader = new FileReader(); 
    reader.onload = function(e){
     //displayImage($('bd'),e.target.result);
     //alert('load');
     $("#imgPreview").attr({'src':e.target.result});
    }
    reader.readAsDataURL(file);
     });*/
    //多图上传 input file控件里指定multiple属性 e.target是dom类型
     $("#imgUpload").change(function(e){ 
       for(var i=0;i<e.target.files.length;i++)
        {
         var file = e.target.files.item(i);
      //允许文件MIME类型 也可以在input标签中指定accept属性
      //console.log(/^image/.*$/i.test(file.type));
      if(!(/^image/.*$/i.test(file.type)))
      {
       continue;   //不是图片 就跳出这一次循环
      }
      
      //实例化FileReader API
      var freader = new FileReader();
      freader.readAsDataURL(file);
      freader.onload=function(e)
      {
       var img = '<img src="'+e.target.result+'" width="200px" height="200px"/>';
       $("#destination").empty().append(img);
      }
        }
      });
     
    //处理图片拖拽的代码
    var destDom = document.getElementById('destination');
    destDom.addEventListener('dragover',function(event){
     event.stopPropagation();
     event.preventDefault();
     },false);
    
    destDom.addEventListener('drop',function(event){
     event.stopPropagation();
     event.preventDefault();
     var img_file = event.dataTransfer.files.item(0);    //获取拖拽过来的文件信息 暂时取一个
     //console.log(event.dataTransfer.files.item(0).type);
     if(!(/^image/.*$/.test(img_file.type)))
     {
      alert('您还未拖拽任何图片过来,或者您拖拽的不是图片文件');
      return false;
     }
     fReader = new FileReader();
     fReader.readAsDataURL(img_file);
     fReader.onload = function(event){
      destDom.innerHTML='';
      destDom.innerHTML = '<img src="'+event.target.result+'" width="200px" height="200px"/>'; 
      };
    },false);
 }
});
</script>
</head>

<body>
<input type="file" id="imgUpload" name="imgUpload" draggable="true" single/>  <!--允许file控件接受的文件类型-->
<!--<input type="file" id="imgUpload" name="imgUpload" accept="image/*" multiple/>-->
<div id="destination" style="width:200px;height:200px;border:1px solid #000000;"><img src="nopic.jpg" /></div>
</body>
</html>

兼容性

•上述方法适用于chrome浏览器
•如果是IE浏览器可以直接使用input的value来代替src
•网上查看资料有直接使用File对象的getAsDataURL()方法获取URL的,现在这个方法都已经废除,类似的还有getAsText()和getAsBinary()方法;

...

本文由永利集团登录网址发布于计算机教学,转载请注明出处:透过createObjectU锐界L落成图片预览

关键词:

  • 上一篇:没有了
  • 下一篇:没有了