HTML5本地拖拽上傳實現圖片預覽功能的實踐總結

     首先網上的帖子很多，但是真正給我莫大幫助的是http://blog.bingo929.com/google-enjoy-html5-drag-drop-filereaderenren.html《給力的 Google HTML5 訓練營(HTML5 Drag&Drop 拖拽、FileReader實例教程)》，這篇文章寫的很精彩，我也是在此對自己的學習進行一些總結。

　　之前看的帖子很多，但是首先會發現的一個問題，就是IE和FF和chrome分別不兼容，之前這個問題困擾了我很久，IE使用濾鏡 FF使用fillReader已經不新鮮了，但是為何chrome始終無法兼容，究其原因，和版本問題有着直接關系，由於html5暫時還處於起步階段，雖然出現了很多優秀的作品，但是各大瀏覽器仍然不能全部支持，很多都是部分支持，但是各大瀏覽器都在日后的開發包括更新中及時的加入支持的最新html5和css3的屬性，所以我感覺和更新有很大的原因，我測試的版本是在最新版chrome(21.0.1180.79)版本下對效果實現了完美的支持，之前的版本忘記了！

　　廢話扯完，進入正題！

     對於拖拽事件，順序為，dragstart-dragenter-dragover-drop-dragend其中尤為重要的是,其中重點要設置的時間是 dragenter、dragover和drop事件，因為要取消瀏覽器的默認行為 大體格式為：

box.addEventListener("dragenter", function(e){ 
            e.stopPropagation();  
            e.preventDefault(); 
            $(e.target).addClass("box-shadow");    
            $(e.target).next().show();
        }, false); 

此處 為dragenter進入拖拽指定區域的時候，我們要取消其默認行為和冒泡事件，同時我們可以添加一些想要再次時候出發的事件函數，均可以使用addEventListener()。

oDropBox.addEventListener('dragover', function(e) {
      e.stopPropagation();
      e.preventDefault();
}, false);
oDropBox.addEventListener('drop', handleDrop, false);

dragover此處表示頁面在指定區域內鼠標未松下，持續拖拽的時候 要阻止其默認行為

drop 表示鼠標放下的時候，觸發應有的事件函數，此處重點就是所綁定的事件，使我們可以具有上傳預覽圖片的功能

那么下面重點就是實現上傳預覽功能，重點就在這個handleDrop()函數中：

關於拖拽本地文件到頁面的幾個相關FileReader屬性和事件：

• readAsDataURL方法：參數為要讀取的文件對象，將文件讀取為DataUrl
• onload事件：當讀取文件成功完成的時候觸發此事件

在FileReader onload事件觸發后，你可以通過this.result來獲取讀取的文件數據，如果是圖片，將返回base64格式的圖片數據。

function handleDrop(e) {
　　e.stopPropagation();
　　e.preventDefault();

　　var fileList  = e.dataTransfer.files,　　//獲取拖拽文件
　　　　oImg = document.createElement('img'),
　　　　reader = new FileReader();

　　reader.onload = function(e) {
　　　　oImg.src = this.result;
　　　　oDropBox.appendChild(oImg);
　　}
　　reader.readAsDataURL(fileList[0]);　　//這里只取拖拽的第一個，實際中你可以遍歷處理file列表
｝

那么通過這種方法就可以實現拖轉圖片上傳預覽的功能，而我做的項目中是拖拽圖片上傳預覽同時實現拖拽自由排序的功能，有時間再做總結！