欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于jquery實(shí)現(xiàn)圖片上傳本地預(yù)覽功能

 更新時間：2016年01月08日 10:45:36   投稿：lijiao  
這篇文章主要介紹了基于jquery實(shí)現(xiàn)圖片上傳本地預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下

當(dāng)我們在上傳文件時如果每次都要上傳到服務(wù)器才可以預(yù)覽這個做看上合理其實(shí)是不合理的，如果網(wǎng)速慢或圖片有問題，這樣不但浪費(fèi)客戶時間同時也浪費(fèi)服務(wù)器資源了，下面我們介紹利用js上傳圖片時本地實(shí)現(xiàn)預(yù)覽，希望此方法對各位有所幫助哦。
一、原理

分為兩步：

當(dāng)上傳圖片的input被觸發(fā)并選擇本地圖片之后獲取要上傳的圖片這個對象的URL（對象URL）；

把對象URL賦值給事先寫好的img標(biāo)簽的src屬性即可把圖片顯示出來。

在這里，我們需要了解Javascript里File對象、Blob對象和window.URL.createObjectURL()方法。

1、File對象

File對象可以用來獲取某個文件的信息,還可以用來讀取這個文件的內(nèi)容.通常情況下,File對象是來自用戶在一個input元素上選擇文件后返回的FileList對象,也可以是來自由拖放操作生成的 DataTransfer對象.

下面來看獲取FileList對象：

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

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

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

2、Blob對象

一個Blob對象就是一個包含有只讀原始數(shù)據(jù)的類文件對象.Blob對象中的數(shù)據(jù)并不一定得是JavaScript中的原生形式.File接口基于Blob,繼承了Blob的功能,并且擴(kuò)展支持了用戶計(jì)算機(jī)上的本地文件.

我們想要得到的對象URL實(shí)際上就是從Blob這個對象獲取的，因?yàn)镕ile的接口繼承Blob。下面就來把Blob對象轉(zhuǎn)換成URL：

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

一個比較完整的實(shí)例

<html>
<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="http://code.jquery.com/jquery-1.8.2.min.js"></script>-->
<script type="text/javascript" src="http://localhost/jQuery/jquery.js"></script>
<script type="text/javascript">
//處理file input加載的圖片文件
$(document).ready(function(e) {
 //判斷瀏覽器是否有FileReader接口
 if(typeof FileReader =='undefined')
 {
  $("#destination").css({'background':'none'}).html('親,您的瀏覽器還不支持HTML5的FileReader接口,無法使用圖片本地預(yù)覽,請更新瀏覽器獲得最好體驗(yàn)');
 //如果瀏覽器是ie
 if($.browser.msie===true)
 {
  //ie6直接用file input的value值本地預(yù)覽
  if($.browser.version==6)
  {
    $("#imgUpload").change(function(event){   
    //ie6下怎么做圖片格式判斷?
    var src = event.target.value;
    //var src = document.selection.createRange().text; //選中后 selection對象就產(chǎn)生了 這個對象只適合ie
    var img = '<img src="'+src+'" width="200px" height="200px" />';
    $("#destination").empty().append(img);
   });
  }
  //ie7,8使用濾鏡本地預(yù)覽
  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相同的方式 設(shè)置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結(jié)束 不過以后都可以用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標(biāo)簽中指定accept屬性
   //console.log(/^image/.*$/i.test(file.type));
   if(!(/^image/.*$/i.test(file.type)))
   {
    continue;  //不是圖片 就跳出這一次循環(huán)
   }
   
   //實(shí)例化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
  • •網(wǎng)上查看資料有直接使用File對象的getAsDataURL()方法獲取URL的，現(xiàn)在這個方法都已經(jīng)廢除，類似的還有g(shù)etAsText()和getAsBinary()方法；

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評論