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)