首頁 > 文章 > web前端 > 基於jquery實作圖片上傳本機預覽功能_jquery

基於jquery實作圖片上傳本機預覽功能_jquery

WBOY原創: 2016-05-16 15:20:591342瀏覽

當我們在上傳檔案時如果每次都要上傳到伺服器才可以預覽這個做看上合理其實是不合理的，如果網速慢或圖片有問題，這樣不但浪費客戶時間同時也浪費伺服器資源了，以下我們介紹利用js上傳圖片時本地實現預覽，希望此方法對各位有所幫助哦。
一、原理

分為兩步驟：

當上傳圖片的input被觸發並選擇本地圖片之後獲取要上傳的圖片這個物件的URL（物件URL）；

把物件URL賦值給事先寫好的img標籤的src屬性即可顯示圖片。

在這裡，我們需要了解Javascript裡File物件、Blob物件和window.URL.createObjectURL()方法。

1、File物件

File物件可以用來取得某個檔案的資訊,還可以用來讀取這個檔案的內容.通常情況下,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物件就是一個包含有唯讀原始資料的類別檔案物件.Blob物件中的資料並不一定得是JavaScript中的原生形式.File介面基於Blob,繼承了Blob的功能,並且擴充支援了使用者電腦上的本機檔案.

我們想要得到的物件URL其實就是從Blob這個物件取得的，因為File的介面繼承Blob。下面就來把Blob物件轉換成URL：

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

一個比較完整的實例

<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接口,无法使用图片本地预览,请更新浏览器获得最好体验');
 //如果浏览器是ie
 if($.browser.msie===true)
 {
  //ie6直接用file input的value值本地预览
  if($.browser.version==6)
  {
    $("#imgUpload").change(function(event){   
    //ie6下怎么做图片格式判断&#63;
    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()方法；

以上就是本文的全部內容，希望對大家的學習有所幫助。

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery實作簡單的遮罩層_javascript技巧下一篇：jquery實作簡單的遮罩層_javascript技巧

看更多

基於jquery實作圖片上傳本機預覽功能_jquery

相關文章