資源描述：
《html5經(jīng)典應(yīng)用：拖拽上傳圖片》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。
1、HTML5經(jīng)典應(yīng)用：拖拽上傳圖片因?yàn)闃?biāo)題寫的是實(shí)例，所以本次就不做講解了，因?yàn)檫@個(gè)實(shí)例我也算是東拼西湊整出來(lái)的，參考了大概5、6款拖拽上傳的插件和demo,然后把其中好的地方挑出來(lái)，最后就成了這么一個(gè)實(shí)例，一起來(lái)看下吧。界面樣式我是參考了一個(gè)國(guó)外的相冊(cè)網(wǎng)站，改動(dòng)不大，只是把鳥語(yǔ)轉(zhuǎn)換成中文，以及上傳吋的樣式也進(jìn)行了改動(dòng)，之所以選這個(gè)的原因就是，我很容易做擴(kuò)展，它支持3種方式添加圖片，一種拖拽上傳，一種常規(guī)的選擇文件上傳，另外的就是添加網(wǎng)絡(luò)圖片。它很巧妙的把三種上傳模式整合到了一起，而且你可以用IE瀏覽器瀏覽下，如果不支持HTML5,是沒
2、有拖拽上傳圖片的提示的，如圖：拖拽上傳授重要的就是js部分的代碼，它實(shí)現(xiàn)了70%的功能，另外30%僅僅是把圖片信息提交到后臺(tái)，然后做對(duì)應(yīng)的處理，比如壓縮啊，裁剪啊云云。所以先來(lái)看下js實(shí)現(xiàn)代碼吧。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〃功能實(shí)現(xiàn)$(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〃檢測(cè)是否是拖拽文件到頁(yè)面的操作36if(fileList.length==0){37$(.dashboard_targct_box)?rcmovcClass(ovcr);38return;39}40〃檢測(cè)文件是不是圖片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〃實(shí)例化f訂ereader對(duì)彖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
