html5 圖片上傳 可收縮 拖拽

可以參考chrome小樂(lè)圖客擴(kuò)展的截圖功能，支持粘貼剪貼板圖片、拖拽圖片、或者粘貼圖片網(wǎng)址上傳，是通過(guò)html5 file reader實(shí)現(xiàn)的。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),米林企業(yè)網(wǎng)站建設(shè),米林品牌網(wǎng)站建設(shè),網(wǎng)站定制,米林網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,米林網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

怎樣用html5實(shí)現(xiàn)拖拽上傳文件

，首先要判斷拖入的文件是否符合要求，包括圖片類(lèi)型、大小等，然后獲取本地圖片信息，實(shí)現(xiàn)預(yù)覽，最后上傳。

$(function(){

...接上部分

var box = document.getElementById('drop_area'); //拖拽區(qū)域

box.addEventListener("drop",function(e){

e.preventDefault(); //取消默認(rèn)瀏覽器拖拽效果

var fileList = e.dataTransfer.files; //獲取文件對(duì)象

//檢測(cè)是否是拖拽文件到頁(yè)面的操作

if(fileList.length == 0){

return false;

}

//檢測(cè)文件是不是圖片

if(fileList[0].type.indexOf('image') === -1){

alert("您拖的不是圖片！");

return false;

}

//拖拉圖片到瀏覽器，可以實(shí)現(xiàn)預(yù)覽功能

var img = window.webkitURL.createObjectURL(fileList[0]);

var filename = fileList[0].name; //圖片名稱(chēng)

var filesize = Math.floor((fileList[0].size)/1024);

if(filesize500){

alert("上傳大小不能超過(guò)500K.");

return false;

}

var str = "img src='"+img+"'p圖片名稱(chēng)："+filename+"/pp大?。?+filesize+"KB/p";

$("#preview").html(str);

//上傳

xhr = new XMLHttpRequest();

xhr.open("post", "upload.php", true);

xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

var fd = new FormData();

fd.append('mypic', fileList[0]);

xhr.send(fd);

},false);

});

如何使用HTML5進(jìn)行文件拖放

如何使用HTML5進(jìn)行文件拖放

1.實(shí)現(xiàn)將文件拖放到頁(yè)面元素上

2.在JavaScript中分析被拖放的文件

3.在客戶(hù)端上加載和解析文件

4.使用XMLHttpRequest2將文件異步上傳到服務(wù)器

5.上傳時(shí)，顯示圖形進(jìn)度條

6.使用進(jìn)程增強(qiáng)( progressive enhancement)以確保文件上傳表單在所有瀏覽器正常工作

7.純JavaScript代碼，不使用其它庫(kù)。