本文實例為大家分享了JS HTML5拖拽上傳圖片預(yù)覽的具體代碼，供大家參考，具體內(nèi)容如下

1.文件API：（File API）

file類型的的表單控件選擇的每一個文件都是一個file對象，而FileList對象則是這些file對象的集合列表，代表所選擇的所有文件。file對象繼承于Blob對象，該對象表示二進制原始數(shù)據(jù)，提供slice方法，可以訪問到字節(jié)內(nèi)部的原始數(shù)據(jù)塊?？傊?，file對象包含與FlieList對象，而file對象繼承于Blob對象！

各對象的相關(guān)屬性關(guān)系：

FileReader接口：
由圖可知：HTML5還提供了FileReader接口：用于將文件讀入內(nèi)存，并讀取文件中的數(shù)據(jù)。

var reader=new FileReader();

該接口總共有四個方法和六個事件：
 •readAsBinaryString(file):讀取文件為二進制
 •readAsDataURL(file):讀取文件DataURL
 •readAsText(file,[encoding])：讀取文件為文本
 •about(none)：中斷文件讀取 
--------------------------------------------------------------------------------
•onabort：讀取文件中斷時觸發(fā)
 •onerror：讀取文件出錯時觸發(fā)
 •onloadstart：讀取文件開始時觸發(fā)
 •onprogress：讀取文件中時一直觸發(fā)
 •onload：讀取文件成功時觸發(fā)
 •onloadend：讀取文件結(jié)束時觸發(fā)（成功和失敗都會觸發(fā)）
以上事件參數(shù)e有e.target.result或this.result指向讀取的結(jié)果！

2.拖放API：

拖放屬性：將需要拖放的元素的dragable屬性設(shè)置為true（dragable=”true”）!img元素和a元素默認可以拖放。

拖放事件：（分為拖放元素事件和目標元素事件）

拖放元素事件：
 •dragstart:拖拽前觸發(fā)
•drag ,拖拽前、拖拽結(jié)束之間，連續(xù)觸發(fā)
 •dragend , 拖拽結(jié)束觸發(fā) 
目標元素事件：
 •dragenter , 進入目標元素觸發(fā)
 •dragover ,進入目標、離開目標之間，連續(xù)觸發(fā)
 •dragleave , 離開目標元素觸發(fā)
 •drop , 在目標元素上釋放鼠標觸發(fā) 
但是！需要注意的是：在目標元素中dragover和drop事件中要阻止默認行為（拒絕被拖放），否則拖放不能被實現(xiàn)！

-----------------------------

DataTransfer對象：專門用于存放拖放時要攜帶的數(shù)據(jù)，可以被設(shè)置為拖放事件的dataTransfer屬性。

3個屬性：
 •effectAllowed : 設(shè)置光標樣式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
 •effectAllowed：設(shè)置拖放操作的視覺效果
 •types：存入數(shù)據(jù)的種類，字符串的偽數(shù)組
 •files：獲取外部拖拽的文件，返回一個fileList列表，filesList下有個type屬性，返回文件的類型 
4個方法：
 •setData() : 設(shè)置數(shù)據(jù) key和value(必須是字符串)
 •getData() : 獲取數(shù)據(jù)，根據(jù)key值，獲取對應(yīng)的value
 •clearData()：清除DataTransfer對象存放的數(shù)據(jù)
 •setDragImage(imageUrl,log x,long y)：用img元素來設(shè)置拖放圖標
 
//示例：
target.addEventListener('dragstart',function(e){
    var fs = e.dataTransfer.files;//獲取拖放的文件對象列表FlieList對象
    var dt=e.dataTransfer;//作為拖放事件的dataTransfer屬性
    dt.effectAllowed='copy';
    dt.setData('text/plain','hello');
    dt.setDragImage(dragIcom,-10,-10);
});

3.拖拽上傳圖片預(yù)覽：

思路：
 1.熟悉文件拖拽 目標元素 的四個事件,注意:ondragover、ondrop事件中阻止默認行為
 2.拖拽放置后，獲取到文件對象集合：e.dataTransfer.files
 3.循環(huán)該集合中的每個文件對象，判斷文件類型以及文件大小，是指定類型則進行相應(yīng)的操作
 4.讀取文件信息對象：new FileReader()，它有讀取文件對象為DataUrl等方法：readAsDataURL(文件對象)、讀取成功之后觸發(fā)的事件：onload事件等，this.result為讀取到的數(shù)據(jù)
 5.在FileReader對象中的幾個事件中進行相應(yīng)的邏輯處理 

HTML：

<div class="container">
  <p class="text">請將圖片文件拖拽至此區(qū)域！</p>
</div>

總加載數(shù)：<span id='total'>100</span>

JQ：

<script type="text/javascript">
    $(function() {
      /*思路：
       *1.熟悉文件拖拽 目標元素 的四個事件,注意:ondragover、ondrop事件中阻止默認行為
       *2.拖拽放置后，獲取到文件對象集合：e.dataTransfer.files
       *3.循環(huán)該集合中的每個文件對象，判斷文件類型以及文件大小，是指定類型則進行相應(yīng)的操作
       *4.讀取文件信息對象：new FileReader()，它有讀取文件對象為DataUrl等方法：readAsDataURL(文件對象)、讀取成功之后觸發(fā)的事件：onload事件等，this.result為讀取到的數(shù)據(jù)
       *5.在FileReader對象中的幾個事件中進行相應(yīng)的邏輯處理
       *
       */

      //必須將jq對象轉(zhuǎn)換為js對象，調(diào)用原生方法
      var oDiv = $(".container").get(0);
      var oP = $(".text");
      //進入
      oDiv.ondragenter = function() {
          oP.html('');
        }
        //移動，需要阻止默認行為，否則直接在本頁面中顯示文件
      oDiv.ondragover = function(e) {

          e.preventDefault();
        }
        //離開
      oDiv.onleave = function() {
          oP.html('請將圖片文件拖拽至此區(qū)域！');
        }
        //拖拽放置，也需要阻止默認行為
      oDiv.ondrop = function(e) {

        e.preventDefault();
        //獲取拖拽過來的對象,文件對象集合
        var fs = e.dataTransfer.files;
        //若為表單域中的file標簽選中的文件，則使用form[表單name].files[0]來獲取文件對象集合
        //打印長度
        console.log(fs.length);
        //循環(huán)多文件拖拽上傳
        for (var i = 0; i < fs.length; i++) {
          //文件類型
          var _type = fs[i].type;

          console.log(_type);
          //判斷文件類型
          if (_type.indexOf('image') != -1) {
            //文件大小控制
            console.log(fs[i].size);
            //讀取文件對象
            var reader = new FileReader();
            //讀為DataUrl,無返回值
            reader.readAsDataURL(fs[i]);
            reader.onloadstart = function(e) {
                //開始加載
              }
              // 這個事件在讀取進行中定時觸發(fā)
            reader.onprogress = function(e) {

              $("#total").html(e.total);
            }

            //當(dāng)讀取成功時觸發(fā)，this.result為讀取的文件數(shù)據(jù)
            reader.onload = function() {
                //文件數(shù)據(jù)
                // console.log(this.result);
                //添加文件預(yù)覽
                var oImg = $("<img style='width:100px;' src='' />");
                oImg.attr("src", this.result);
                $(oDiv).append(oImg); //oDiv轉(zhuǎn)換為js對象調(diào)用方法
              }
              //無論成功與否都會觸發(fā)
            reader.onloadend = function() {
              if (reader.error) {
                console.log(reader.error);
              } else {
                //上傳沒有錯誤，ajax發(fā)送文件，上傳二進制文件
              }
            }
          } else {
            alert('請上傳圖片文件！');
          }
        }

      }
    });
</script>

效果圖：

總結(jié)：結(jié)合拖放事件API，DataTransfer對象和文件讀取對象FileList等方面的知識，實現(xiàn)簡易拖拽上傳圖片預(yù)覽效果。需要了解熟悉個對象的關(guān)系以及用法，明確好實現(xiàn)思路！

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

最新評論