基於jquery實現圖片上傳本地預覽功能

時間 2019-12-09

原文原文鏈接

1、原理javascript

　　分爲兩步：css

　　當上傳圖片的input被觸發並選擇本地圖片以後獲取要上傳的圖片這個對象的URL（對象URL），把對象URL賦值給事先寫好的img標籤的src屬性便可把圖片顯示出來。在這裏，咱們須要瞭解Javascript裏File對象、Blob對象和window.URL.createObjectURL()方法。html

　　一、File對象java

　　File對象能夠用來獲取某個文件的信息,還能夠用來讀取這個文件的內容.一般狀況下,File對象是來自用戶在一個input元素上選擇文件後返回的FileList對象,也能夠是來自由拖放操做生成的 DataTransfer對象.下面來看獲取FileList對象：jquery

 
  <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> 
 

二、Blob對象chrome

　　一個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下怎麼作圖片格式判斷?
                            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>