這是一個(gè)網(wǎng)友的代碼 你可以參考一下
創(chuàng)新互聯(lián)于2013年開(kāi)始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元陜州做網(wǎng)站,已為上家服務(wù),為陜州各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220
!doctype html
html
head
meta charset="utf-8"
title無(wú)標(biāo)題文檔/title
/head
script
function mstart(a){
//設(shè)置初始數(shù)據(jù)setdata（）
a.dataTransfer.setData("Text",a.target.id);
}
function mover(a){
//把系統(tǒng)默認(rèn)鼠標(biāo)或拖拽操作屏蔽掉
a.preventDefault();//屏蔽系統(tǒng)默認(rèn)的dragover引發(fā)的效果
}
function mdrop(a){
a.preventDefault();
var data=a.dataTransfer.getData("Text");
a.target.appendChild(document.getElementById(data));
}
/script
body
div id="mydiv" style="height:568px; width:500px; border:2px solid" ondragover="mover(event)" ondrop="mdrop(event)"/div
img id="myimg1" src="vt.jpg" width="250" height="200" draggable="true" ondragstart="mstart(event)"
img id="myimg2" src="vt.jpg" width="250" height="200" draggable="true" ondragstart="mstart(event)"
img id="myimg3" src="vt.jpg" width="250" height="200" draggable="true" ondragstart="mstart(event)"
br
/body
/html
，首先要判斷拖入的文件是否符合要求，包括圖片類型、大小等，然后獲取本地圖片信息，實(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; //圖片名稱
var filesize = Math.floor((fileList[0].size)/1024);
if(filesize500){
alert("上傳大小不能超過(guò)500K.");
return false;
}
var str = "img src='"+img+"'p圖片名稱："+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);
});
把文件從桌面拖拽到瀏覽器是Web應(yīng)用程序集成的最終目標(biāo)之一。本教程共四篇文章(本文是第一篇)，主要介紹了：
1.實(shí)現(xiàn)將文件拖放到頁(yè)面元素上
2.在JavaScript中分析被拖放的文件
3.在客戶端上加載和解析文件
4.使用XMLHttpRequest2將文件異步上傳到服務(wù)器
5.上傳時(shí)，顯示圖形進(jìn)度條
6.使用進(jìn)程增強(qiáng)( progressive enhancement)以確保文件上傳表單在所有瀏覽器正常工作
7.純JavaScript代碼，不使用其它庫(kù)。
咻，開(kāi)始吧！
糟糕的瀏覽器支持
在開(kāi)始之前說(shuō)明一下，這個(gè)教程使用了一些HTML5的最新技術(shù)，可能以后會(huì)被修正。目前代碼可以正常工作，但是很可能隨著API的變化或者瀏覽器升級(jí)而受到影響。
§Firefox和Chrome的最新版本支持所有的功能并且可以完美運(yùn)行。
§Opera可以用JavaScript解析文件，但未實(shí)現(xiàn)拖放文件和XMLHttpRequest2上傳。
§IE瀏覽器和桌面版本的Safari不支持所有的API。
§蘋果已禁用Safari瀏覽器的iPhone和iPad版本的HTML文件上傳表單。有誰(shuí)知道為什么嗎？
最后，請(qǐng)注意我的代碼只是演示了基本概念，幾乎沒(méi)有錯(cuò)誤檢查，因此需要進(jìn)行修改以適應(yīng)你的工作需要。
HTML和CSS
這是我們的帶有文件輸入類型的標(biāo)準(zhǔn)表單。唯一的HTML5特性是“multiple”屬性，它允許用戶選擇任意數(shù)量的文件。
我們將上傳文件到運(yùn)行PHP的服務(wù)器上，但是無(wú)論你在服務(wù)器端使用什么技術(shù)，代碼是大致相同的。隱藏的MAX_FILE_SIZE值指定為300,000個(gè)字節(jié)，這是PHP使用的，但我們還會(huì)在瀏覽器端用它進(jìn)行檢查，以防止大文件上傳。
#filedrag元素將被用作接收拖放文件的位置。元素是通過(guò)CSS隱藏的，但如果瀏覽器支持拖拽的話，它會(huì)在JavaScript中被顯示：
我們還定義了一個(gè).hover類，當(dāng)用戶拖動(dòng)文件到相應(yīng)區(qū)域元素時(shí)，改變?cè)氐娘@示風(fēng)格。瀏覽器不支持在那種情況下的:hover風(fēng)格，但當(dāng)事件觸發(fā)時(shí)，我們可以用JavaScript添加類。
文件操作API
W3C 文件操作API
提供了一些對(duì)象，我們使用了：
§FileList：代表選定的文件數(shù)組。
§File：代表一個(gè)單獨(dú)的文件。
§FileReader：支持JavaScript的客戶端讀取文件數(shù)據(jù)的接口。
Javascript事件
是時(shí)候處理JavaScript代碼了。我們不使用任何JavaScript庫(kù)，為了節(jié)省時(shí)間，我們將創(chuàng)建一個(gè)輔助函數(shù)返回元素的ID和輸出狀態(tài)消息：
我們將在Init()函數(shù)里檢查文件操作API是否有效:
Init()函數(shù)說(shuō)明:
1.給文件輸入元素設(shè)置一個(gè)“change”事件監(jiān)聽(tīng)器。
2.顯示#filedrag元素。
3.設(shè)置“dragover”和“dragleave”事件監(jiān)聽(tīng)器，以改變的＃filedrag元素的風(fēng)格。
4.給#filedrag元素設(shè)置一個(gè)“drop”的事件監(jiān)聽(tīng)器。
5.隱藏表單的提交按鈕 - 它不是必需的，因?yàn)楫?dāng)文件被選中時(shí)我們將進(jìn)行分析和上傳，而不是提交表單。
或者，當(dāng)瀏覽器支持文件拖動(dòng)時(shí)，你可以隱藏文件輸入元素。就個(gè)人而言，我更愿意同時(shí)提供兩種選擇，因?yàn)橥戏艑?shí)際上會(huì)帶來(lái)實(shí)用性的問(wèn)題。
XMLHttpRequest.upload方法檢查防止在Opera中的問(wèn)題。瀏覽器支持File，F(xiàn)ileList和FileReader，但不支持拖放事件或XMLHttpRequest2。因此，它可以顯示文件信息，但我們不希望顯示#filedrag的元素或刪除submit按鈕。
改變文件拖放風(fēng)格
很少人在瀏覽器中進(jìn)行過(guò)文件拖放。事實(shí)上，經(jīng)驗(yàn)豐富的網(wǎng)絡(luò)用戶也不太考慮是否可行。因此，我們使用了標(biāo)有“drop files here”的元素。當(dāng)文件拖到#filedrag上時(shí)，我們還通過(guò)改變?cè)氐娘L(fēng)格來(lái)進(jìn)行顯示。
分析放下或被選中的文件
無(wú)論是使用“Browse”按鈕來(lái)選中一個(gè)或多個(gè)文件，或者將文件拖放到拖#filedrag的位置上，我們使用的的相同F(xiàn)ileSelectHandler()函數(shù)來(lái)進(jìn)行處理：
函數(shù)說(shuō)明：
1.調(diào)用FileDragHover()刪除hover風(fēng)格和取消瀏覽器的事件。這是必不可少的，否則瀏覽器可能會(huì)嘗試顯示該文件。
2.獲取一個(gè)FileList對(duì)象，無(wú)論是從文件輸入框（e.target.files）或#filedrag元素（例如dataTransfer.files）。
3.最后，函數(shù)遍歷FileList的所有File對(duì)象，并把它作為一個(gè)參數(shù)傳遞給ParseFile()函數(shù)...
該函數(shù)輸出的信息是File對(duì)象提供的三個(gè)主要的只讀屬性：
§.name: 文件名 (不包含文件路徑)。
§.type: MIME類型, 例如 image/jpeg，text/plain等等。
§.size: 文件大?。ㄗ止?jié)）.
html5 拖動(dòng)效果在手機(jī)上實(shí)現(xiàn)方法是調(diào)用drag和drop一系列函數(shù)實(shí)現(xiàn)的。
注意：拖拽源在拖拽操作結(jié)束將得到dragend事件對(duì)象，不管操作成功與否。
舉例：
定義可拖放內(nèi)容
div id="columns"
div class="column" draggable="true"headerA/header/div
div class="column" draggable="true"headerB/header/div
div class="column" draggable="true"headerC/header/div
/div
2、監(jiān)聽(tīng)拖動(dòng)事件
可附加大量不同事件以監(jiān)聽(tīng)整個(gè)拖放過(guò)程：
dragstart
drag
dragenter
dragleave
dragover
drop
dragend
a.這里是開(kāi)始拖拽
function handleDragStart(e) {
this.style.opacity = '0.4'; ?// this / e.target is the source node.
}
var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', handleDragStart, false);
});
b.dragenter、dragover?和?dragleave?事件處理程序可用于在拖動(dòng)過(guò)程中提供額外的可視化提示。例如，在拖動(dòng)期間將鼠標(biāo)懸停在某一列上方時(shí)，其邊框可能會(huì)變成虛線。這樣，用戶就能知道這些列也是放置的目標(biāo)區(qū)域。
HTML 5 拖放
HTML5 音頻
HTML5 畫(huà)布
拖放（Drag 和 drop）是 HTML5 標(biāo)準(zhǔn)的組成部分。
拖放
拖放是一種常見(jiàn)的特性，即抓取對(duì)象以后拖到另一個(gè)位置。
在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。
瀏覽器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注釋：在 Safari 5.1.2 中不支持拖放。
HTML5 拖放實(shí)例
下面的例子是一個(gè)簡(jiǎn)單的拖放實(shí)例：
實(shí)例
!DOCTYPE HTML
html
head
script type="text/javascript"
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
/script
/head
body
div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"/div
img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" /
/body
/html
親自試一試
它看上去也許有些復(fù)雜，不過(guò)我們可以分別研究拖放事件的不同部分。
設(shè)置元素為可拖放
首先，為了使元素可拖動(dòng)，把 draggable 屬性設(shè)置為 true ：
img draggable="true" /
拖動(dòng)什么 - ondragstart 和 setData()
然后，規(guī)定當(dāng)元素被拖動(dòng)時(shí)，會(huì)發(fā)生什么。
在上面的例子中，ondragstart 屬性調(diào)用了一個(gè)函數(shù)，drag(event)，它規(guī)定了被拖動(dòng)的數(shù)據(jù)。
dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在這個(gè)例子中，數(shù)據(jù)類型是 "Text"，值是可拖動(dòng)元素的 id ("drag1")。
放到何處 - ondragover
ondragover 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)。
默認(rèn)地，無(wú)法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對(duì)元素的默認(rèn)處理方式。
這要通過(guò)調(diào)用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
進(jìn)行放置 - ondrop
當(dāng)放置被拖數(shù)據(jù)時(shí)，會(huì)發(fā)生 drop 事件。
在上面的例子中，ondrop 屬性調(diào)用了一個(gè)函數(shù)，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代碼解釋：
調(diào)用 preventDefault() 來(lái)避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開(kāi)）
通過(guò) dataTransfer.getData("Text") 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)。
被拖數(shù)據(jù)是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目標(biāo)元素）中
重慶分公司
重慶分公司
