2011
Oct
23
HTML5 支援拖拉圖片到網頁，上傳圖片。(drag)
假設一個 div ，是我們要拖拉圖片進入的tag。
- <div id="dragBox" style="height:100px;width:200px;border:1px solid #a00;padding:10px;" >
- 請拖曳圖片至此
- </div>
使用 JQuery 對div綁事件 , ondragenter, ondragover, ondrop
- function bindEvent(obj){
- $(obj).bind("dragover",ondragover);
- $(obj).bind("dragenter",ondragenter);
- $(obj).bind("dragleave",ondragleave);
- $(obj).get(0).addEventListener("drop", ondragdrop, false);
- //這裡不能用 JQuery bind drop event , 否則 event.dataTransfer 會抓不到
- }
Event : onDragEnter
- 拖拉圖片進 div 時，觸發ondragenter 事件。
- function ondragenter(){
- //變更div css 效果
- event.stopPropagation();
- event.preventDefault();
- }
Event : onDragLeave
- 拖拉圖片離開 div 時，觸發ondragleave 事件
- function ondragenter(){
- //變更div css 效果
- event.stopPropagation();
- event.preventDefault();
- }
Event : onDragOver
- 拖拉圖片在 div上移動時，觸發事件
- function ondragover(){
- event.stopPropagation();
- event.preventDefault();
- }
Event : onDrop
- 拖拉圖片在 div上放開時，觸發事件
- function ondrop(event){
- event.stopPropagation();
- event.preventDefault();
- var dt = event.dataTransfer;
- var files = dt.files;
- }
載入user拖拉進來的圖片
- 使用HTML5 中的dataTransfer物件。
- 使用Filelist來取得檔案名稱，以及檔案尺寸。
- 從Filelist取得 file後，其屬性如下
- size = 71189
- type = image/jpeg
- //切割檔案 mozSlice(start,end);
- mozSlice = function mozSlice() { [native code] }
- name = Sunset.jpg
- mozFullPath =
- 使用 FileReader 來讀取user local端的圖片，FileReader會回傳base64編碼後的檔案格式 (data uri)。
- 格式大概是長這樣，它不是亂碼XD
data:image/jpeg;base64,/9j/4AAQSkZJRgABA....
- 範例程式
- function getFiles(event){
- var dt = event.dataTransfer;
- var files = dt.files;
- var n = files.length;
- for (var i = 0; i < n; i++) {
- var file = files[i];
- var fileName=file.name;
- var reader = new FileReader();
- reader.readAsDataURL(file);
- reader.onloadend =function(event){
- var filedata = event.target.result;
- $(document.body).append("<img src='"+filedata+"' />")
- }
- }
- }