html5经典应用：拖拽上传图片

《html5经典应用：拖拽上传图片》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、HTML5经典应用：拖拽上传图片因为标题写的是实例，所以本次就不做讲解了，因为这个实例我也算是东拼西凑整出来的，参考了大概5、6款拖拽上传的插件和demo,然后把其中好的地方挑出来，最后就成了这么一个实例，一起来看下吧。界面样式我是参考了一个国外的相册网站，改动不大，只是把鸟语转换成中文，以及上传吋的样式也进行了改动，之所以选这个的原因就是，我很容易做扩展，它支持3种方式添加图片，一种拖拽上传，一种常规的选择文件上传，另外的就是添加网络图片。它很巧妙的把三种上传模式整合到了一起，而且你可以用IE浏览器浏览下，如果不支持HTML5,是没

2、有拖拽上传图片的提示的，如图：拖拽上传授重要的就是js部分的代码，它实现了70%的功能，另外30%仅仅是把图片信息提交到后台，然后做对应的处理，比如压缩啊，裁剪啊云云。所以先來看下js实现代码吧。01$().ready(function(){02if(S.browser.safariII$.browser.mozilla){03S(#dtb-msgl.compatible).show();04$(#dtb-msg1.notcompatible).hide();05S(#drop_zone_home).hover(function(){

3、06$(this).children(p).stop().animate({top:0px},200);07},function(){08S(this).childrcn(p).stop().animatedtop:-44px},200);10〃功能实现$(document).on({dragleave:function(e){e.preventDefault();$(.dashboard_target_box).removeClass(over);}，drop:function(e){e.preventDefault();//$(.

4、dashboard_target_box).removedass(over);}，dragenter:function(e){e.preventDefault();$(.dashboard_target_box).addClass(over);}，dragover:function(e){c.prcvcntDcfault();$(.dashboard_target_box).addClass(over);}})；varbox=document.getElementById(target_box);box.addEventListene

5、r(drop,function(e){e.preventDefault();〃获取文件列表33varfileList=e.dataTransfer・files;34varimg=document.createElemerH(img);35〃检测是否是拖拽文件到页面的操作36if(fileList.length==0){37$(.dashboard_targct_box)・rcmovcClass(ovcr);38return;39}40〃检测文件是不是图片41if(fileList[0].type.indexOf(image)===・1

6、){42$(.dashboard_target_box)・removedass(over);43return;44}4545if($.browser.safari){46//Chromc8+47img.src=window.webkitURL.createObjectURL(fileList[OJ);48}elseif($.browser.mozilla){49//FF4+51img.src=window.URL.createObjectURL(f订cList[O]);52}else{53〃实例化f订ereader对彖54varrea

7、der=newFileReader();52reader.onload=function(e){53img.src=this.result;54$(document,body)>appendChild(img);55}56rcadcr.rcadAsDataURL(filcList[O]);57}41varxhr=newXMLHttpRequest();62xhr.open(post,test・php,true);63xhr.setRequestHeader(X-Requested-With,XMLHttpRequest);64xhr.

8、upload.addEventListener(progress,function(e){65$(#dtb-msg3).hide();66$(#dtb-msg4span).show();67$(#dtb-msg4).ch