2011
Oct
23




HTML5 支援拖拉圖片到網頁,上傳圖片。(drag)

假設一個 div ,是我們要拖拉圖片進入的tag。

  1. <div id="dragBox" style="height:100px;width:200px;border:1px solid #a00;padding:10px;" >
  2. 請拖曳圖片至此
  3. </div>

使用 JQuery 對div綁事件 , ondragenter, ondragover, ondrop

  1. function bindEvent(obj){
  2. $(obj).bind("dragover",ondragover);
  3. $(obj).bind("dragenter",ondragenter);
  4. $(obj).bind("dragleave",ondragleave);
  5. $(obj).get(0).addEventListener("drop", ondragdrop, false);
  6. //這裡不能用 JQuery bind drop event , 否則 event.dataTransfer 會抓不到
  7. }

Event : onDragEnter

  • 拖拉圖片進 div 時,觸發ondragenter 事件。
  1. function ondragenter(){
  2. //變更div css 效果
  3. event.stopPropagation();
  4. event.preventDefault();
  5. }

Event : onDragLeave

  • 拖拉圖片離開 div 時,觸發ondragleave 事件
  1. function ondragenter(){
  2. //變更div css 效果
  3. event.stopPropagation();
  4. event.preventDefault();
  5. }

Event : onDragOver

  • 拖拉圖片在 div上移動時,觸發事件
  1. function ondragover(){
  2. event.stopPropagation();
  3. event.preventDefault();
  4. }

Event : onDrop

  • 拖拉圖片在 div上放開時,觸發事件
  1. function ondrop(event){
  2. event.stopPropagation();
  3. event.preventDefault();
  4. var dt = event.dataTransfer;
  5. var files = dt.files;
  6. }

載入user拖拉進來的圖片

  • 使用HTML5 中的dataTransfer物件。
  • 使用Filelist來取得檔案名稱,以及檔案尺寸。
  • 從Filelist取得 file後,其屬性如下
  1. size = 71189
  2. type = image/jpeg
  3. //切割檔案 mozSlice(start,end);
  4. mozSlice = function mozSlice() { [native code] }
  5. name = Sunset.jpg
  6. mozFullPath =
  • 使用 FileReader 來讀取user local端的圖片,FileReader會回傳base64編碼後的檔案格式 (data uri)。
  • 格式大概是長這樣,它不是亂碼XD

data:image/jpeg;base64,/9j/4AAQSkZJRgABA....

  • 範例程式
  1. function getFiles(event){
  2. var dt = event.dataTransfer;
  3. var files = dt.files;
  4. var n = files.length;
  5. for (var i = 0; i < n; i++) {
  6. var file = files[i];
  7. var fileName=file.name;
  8. var reader = new FileReader();
  9. reader.readAsDataURL(file);
  10. reader.onloadend =function(event){
  11. var filedata = event.target.result;
  12. $(document.body).append("<img src='"+filedata+"' />")
  13. }
  14. }
  15. }

Example


回應 (Leave a comment)