使用HTML5的文件API，可(kě)以将操作(zuò)系統中的文件拖放到浏覽器(qì)的指定區(qū)域，實現文件上(shàng)傳到服務器(qì)。本文将結合實例講解HTML5+jQuery+PHP實現拖拽上(shàng)傳圖片的過程，來(lái)看下HTML5的魅力吧(ba)。

HTML

我們在頁面中放置一個(gè)拖拽區(qū)域#drop_area，即接收拖拽的區(qū)域，#preview用來(lái)預覽拖拽上(shàng)傳的圖片信息。

	将圖片拖拽到此區(qū)域



	

Javascript

要想實現拖拽，頁面需要阻止浏覽器(qì)默認行(xíng)為(wèi)，即四個(gè)事件（拖離、拖後放、拖進、拖來(lái)拖去），因為(wèi)我們要阻止浏覽器(qì)默認将圖片打開(kāi)的行(xíng)為(wèi)，這裏我們使用jQuery來(lái)完成。

$(function(){
	//阻止浏覽器(qì)默認行(xíng)。
	$(document).on({
		dragleave:function(e){	//拖離
			e.preventDefault();
		},
		drop:function(e){  //拖後放
			e.preventDefault();
		},
		dragenter:function(e){	//拖進
			e.preventDefault();
		},
		dragover:function(e){	//拖來(lái)拖去
			e.preventDefault();
		}
	});
    ...
});

接下來(lái)我們來(lái)了解下文件API。HTML5的文件API有(yǒu)一個(gè)FileList接口，它可(kě)以通(tōng)過e.dataTransfer.files拖拽事件傳遞的文件信息，獲取本地文件列表信息。

var fileList = e.dataTransfer.files;

使用files 方法将會(huì)獲取到拖拽文件的數(shù)組形勢的數(shù)據，每個(gè)文件占用一個(gè)數(shù)組的索引，如果該索引不存在文件數(shù)據，将返回 null 值。可(kě)以通(tōng)過length屬性獲取文件數(shù)量.

var fileNum = fileList.length;

在本例中，我們用javascript來(lái)偵聽(tīng)drop事件，首先要判斷拖入的文件是否符合要求，包括圖片類型、大(dà)小(xiǎo)等，然後獲取本地圖片信息，實現預覽，最後上(shàng)傳。

$(function(){
	...接上(shàng)部分
	var box = document.getElementById('drop_area'); //拖拽區(qū)域
	box.addEventListener("drop",function(e){
		e.preventDefault(); //取消默認浏覽器(qì)拖拽效果
		var fileList = e.dataTransfer.files; //獲取文件對象
		//檢測是否是拖拽文件到頁面的操作(zuò)
		if(fileList.length == 0){
			return false;
		}
		//檢測文件是不是圖片
		if(fileList[0].type.indexOf('image') === -1){
			alert("您拖的不是圖片！");
			return false;
		}
		
		//拖拉圖片到浏覽器(qì)，可(kě)以實現預覽功能
		var img = window.webkitURL.createObjectURL(fileList[0]);
		var filename = fileList[0].name; //圖片名稱
		var filesize = Math.floor((fileList[0].size)/1024); 
		if(filesize>500){
			alert("上(shàng)傳大(dà)小(xiǎo)不能超過500K.");
			return false;
		}
		var str = "

	圖片名稱："+filename+"



	大(dà)小(xiǎo)："+filesize+"KB

";
		$("#preview").html(str);
		
		//上(shàng)傳
		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);
});

我們用FormData模拟表單數(shù)據，直接将數(shù)據append到formdata對象中，實現了ajax上(shàng)傳。

PHP

upload.php用于接收上(shàng)傳的文件信息，完成上(shàng)傳，實現代碼如下：

 512000) {
		echo '圖片大(dà)小(xiǎo)不能超過500k';
		exit;
	}
	$type = strstr($picname, '.');
	if ($type != ".gif" && $type != ".jpg") {
		echo '圖片格式不對！';
		exit;
	}
	$pics = 'helloweba' . $type;
	//上(shàng)傳路徑
	$pic_path = "pics/". $pics;
	move_uploaded_file($mypic["tmp_name"],$pic_path);
}
?>

最後總結下HTML5實現拖拽上(shàng)傳的技(jì)術(shù)要點：

1、監聽(tīng)拖拽：監聽(tīng)頁面元素的拖拽事件，包括：dragenter、dragover、dragleave和(hé)drop，一定要将dragover的默認事件取消掉，不然無法觸發drop事件。如需拖拽頁面裏的元素，需要給其添加屬性draggable=”true”；

2、獲取拖拽文件：在drop事件觸發後通(tōng)過e.dataTransfer.files獲取拖拽文件列表，.length屬性獲取文件數(shù)量，.type屬性獲取文件類型。

3、讀取圖片數(shù)據并添加預覽圖。

4、發送圖片數(shù)據：使用FormData模拟表單數(shù)據AJAX提交文件流。