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+"' />")
- }
- }
- }