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

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:20 PM

jquery 圖片上傳

當我們在上傳檔案時如果每次都要上傳到伺服器才可以預覽這個做看上合理其實是不合理的，如果網速慢或圖片有問題，這樣不但浪費客戶時間同時也浪費伺服器資源了，以下我們介紹利用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

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7648

CakePHP 教程

1392

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT迷你填字遊戲答案

110

Related knowledge

jQuery引用方法詳解：快速上手指南 Feb 27, 2024 pm 06:45 PM

jQuery引用方法詳解：快速上手指南jQuery是一個受歡迎的JavaScript庫，被廣泛用於網站開發中，它簡化了JavaScript編程，並為開發者提供了豐富的功能和特性。本文將詳細介紹jQuery的引用方法，並提供具體的程式碼範例，幫助讀者快速上手。引入jQuery首先，我們需要在HTML檔案中引入jQuery函式庫。可以透過CDN連結的方式引入，也可以下載

jQuery中如何使用PUT請求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u

jQuery如何移除元素的height屬性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height屬性？在前端開發中，經常會遇到需要操作元素的高度屬性的需求。有時候，我們可能需要動態改變元素的高度，而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性，並提供具體的程式碼範例。在使用jQuery操作高度屬性之前，我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度

jQuery小技巧：快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：&lt

使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：

了解jQuery中eq的作用及應用場景 Feb 28, 2024 pm 01:15 PM

jQuery是一種流行的JavaScript庫，被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中，eq()方法是用來選擇指定索引位置的元素的方法，具體使用方法和應用場景如下。在jQuery中，eq()方法選擇指定索引位置的元素。索引位置從0開始計數，即第一個元素的索引是0，第二個元素的索引是1，依此類推。 eq()方法的語法如下：$("s

如何判斷jQuery元素是否具有特定屬性？ Feb 29, 2024 am 09:03 AM

如何判斷jQuery元素是否具有特定屬性？在使用jQuery操作DOM元素時，常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下，我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性，並附上具體的程式碼範例。方法一：使用attr()方法和typeof運算子//判斷元素是否具有特定屬

使用jQuery為表格新增一行的方法介紹 Feb 29, 2024 am 08:12 AM

jQuery是一個受歡迎的JavaScript函式庫，廣泛用於網頁開發。在網頁開發過程中，經常需要透過JavaScript動態地在表格中新增一行。本文將介紹如何使用jQuery為表格新增一行，並提供具體的程式碼範例。首先，我們需要在HTML頁面中引入jQuery函式庫。可以透過以下程式碼在標籤中引入jQuery庫：

See all articles

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

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題