整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
節(jié)我們學(xué)習(xí) HTML5 中的拖放，拖放是一種常見的特性，也就是抓取對象以后拖到另一個位置。在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。
拖放是由拖動與釋放兩部分組成，拖放事件也分為被拖動元素的相關(guān)事件，和容器的相關(guān)事件。
被拖動元素的相關(guān)事件如下所示：
容器相關(guān)事件如下所示：
我們通過上述的拖放事件來實現(xiàn)將下圖“你好，俠課島”，拖放到上面的矩形框中的演示效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5學(xué)習(xí)(9xkd.com)</title>
<style type="text/css">
.div1{
width:200px;
height:100px;
padding:20px;
border:1px solid #000;
}
p{
font-size: 28px;
}
</style>
</head>
<body>
<div>
<div class="div1" id="div1" ></div>
<p id="drag1">你好，俠課島！</p>
</div>
</body>
</html>
<p id="drag1" draggable="true">你好，俠課島！</p>
只有設(shè)置了 draggable 屬性值為 true ，指定元素才能被拖動。
function drag(e){
e.dataTransfer.setData("Text", e.target.id);
}
代碼中的 dataTransfer.setData() 方法用于設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值。參數(shù) Text 表示被拖動數(shù)據(jù)的數(shù)據(jù)類型，參數(shù) e.target.id 是可拖動元素的 id。
function allowDrop(e){
e.preventDefault();
}
<div id="div1" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<script>
function drop(e){
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
</script>
在 ondrop 事件中同樣需要調(diào)用 e.preventDefault() 方法來阻止默認(rèn)行為。然后可以通過 dataTransfer.getData("Text"); 方法獲取之前的 drag(event) 函數(shù)中保存的信息，也就是被拖動元素的 id。接著通過 target.appendChild() 方法為將拖動元素作為元素容器的子元素追加到元素容器中，這樣就能成功實現(xiàn)拖放。
完整代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5學(xué)習(xí)(9xkd.com)</title>
<style type="text/css">
.div1{
width:200px;
height:100px;
padding:20px;
border:1px solid #000;
}
p{
font-size: 28px;
}
</style>
</head>
<body>
<div>
<div id="div1" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<p id="drag1" draggable="true" ondragstart="drag(event)">你好，俠課島！</p>
</div>
<script>
function drag(e){
e.dataTransfer.setData("Text", e.target.id);
}
function allowDrop(e){
e.preventDefault();
}
function drop(e){
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>
當(dāng)我們要對某個元素實行拖放操作時，首先就需將這個元素的 draggable 屬性設(shè)置為 true，表示允許元素拖動。其中圖片和鏈接默認(rèn)是可拖動的，不需設(shè)置要 draggable 屬性。
鏈接：https://www.9xkd.com/
今年國慶假期終于可以憋在家里了不用出門了，不用出去看后腦了，真的是一種享受。這么好的光陰怎么浪費，睡覺、吃飯、打豆豆這怎么可能（耍多了也煩），完全不符合我們程序員的作風(fēng)，趕緊起來把文章寫完。
這篇文章比較基礎(chǔ)，在國慶期間的業(yè)余時間寫的，這幾天又完善了下，力求把更多的前端所涉及到的關(guān)于文件上傳的各種場景和應(yīng)用都涵蓋了,若有疏漏和問題還請留言斧正和補(bǔ)充。
以下是本文所涉及到的知識點，break or continue ?
原理很簡單，就是根據(jù) http 協(xié)議的規(guī)范和定義，完成請求消息體的封裝和消息體的解析，然后將二進(jìn)制內(nèi)容保存到文件。
我們都知道如果要上傳一個文件，需要把 form 標(biāo)簽的enctype設(shè)置為multipart/form-data,同時method必須為post方法。
那么multipart/form-data表示什么呢？
multipart互聯(lián)網(wǎng)上的混合資源，就是資源由多種元素組成，form-data表示可以使用HTML Forms 和 POST 方法上傳文件，具體的定義可以參考RFC 7578。
multipart/form-data 結(jié)構(gòu)
看下 http 請求的消息體
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次請求要上傳文件，其中boundary表示分隔符，如果要上傳多個表單項，就要使用boundary分割，每個表單項由———XXX開始，以———XXX結(jié)尾。
每一個表單項又由Content-Type和Content-Disposition組成。
Content-Disposition: form-data 為固定值，表示一個表單元素，name 表示表單元素的 名稱，回車換行后面就是name的值，如果是上傳文件就是文件的二進(jìn)制內(nèi)容。
Content-Type：表示當(dāng)前的內(nèi)容的 MIME 類型，是圖片還是文本還是二進(jìn)制數(shù)據(jù)。
解析
客戶端發(fā)送請求到服務(wù)器后，服務(wù)器會收到請求的消息體，然后對消息體進(jìn)行解析，解析出哪是普通表單哪些是附件。
可能大家馬上能想到通過正則或者字符串處理分割出內(nèi)容，不過這樣是行不通的，二進(jìn)制buffer轉(zhuǎn)化為string,對字符串進(jìn)行截取后，其索引和字符串是不一致的，所以結(jié)果就不會正確，除非上傳的就是字符串。
不過一般情況下不需要自行解析，目前已經(jīng)有很成熟的三方庫可以使用。
至于如何解析，這個也會占用很大篇幅，后面的文章在詳細(xì)說。
使用 form 表單上傳文件
在 ie時代，如果實現(xiàn)一個無刷新的文件上傳那可是費老勁了，大部分都是用 iframe 來實現(xiàn)局部刷新或者使用 flash 插件來搞定，在那個時代 ie 就是最好用的瀏覽器（別無選擇）。
DEMO
這種方式上傳文件，不需要 js ，而且沒有兼容問題，所有瀏覽器都支持，就是體驗很差，導(dǎo)致頁面刷新，頁面其他數(shù)據(jù)丟失。
HTML
<form method="post" action="http://localhost:8100" enctype="multipart/form-data">
選擇文件:
<input type="file" name="f1"/> input 必須設(shè)置 name 屬性，否則數(shù)據(jù)無法發(fā)送<br/>
<br/>
標(biāo)題：<input type="text" name="title"/><br/><br/><br/>
<button type="submit" id="btn-0">上 傳</button>
</form>
復(fù)制代碼服務(wù)端文件的保存基于現(xiàn)有的庫koa-body結(jié)合 koa2實現(xiàn)服務(wù)端文件的保存和數(shù)據(jù)的返回。
在項目開發(fā)中，文件上傳本身和業(yè)務(wù)無關(guān)，代碼基本上都可通用。
在這里我們使用koa-body庫來實現(xiàn)解析和文件的保存。
koa-body 會自動保存文件到系統(tǒng)臨時目錄下，也可以指定保存的文件路徑。
然后在后續(xù)中間件內(nèi)得到已保存的文件的信息，再做二次處理。
NODE
/**
* 服務(wù)入口
*/
var http = require('http');
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');//文件保存庫
var fs = require('fs');
var Koa = require('koa2');
var app = new Koa();
var port = process.env.PORT || '8100';
var uploadHost= `http://localhost:${port}/uploads/`;
app.use(koaBody({
formidable: {
//設(shè)置文件的默認(rèn)保存目錄，不設(shè)置則保存在系統(tǒng)臨時目錄下 os
uploadDir: path.resolve(__dirname, '../static/uploads')
},
multipart: true // 開啟文件上傳，默認(rèn)是關(guān)閉
}));
//開啟靜態(tài)文件訪問
app.use(koaStatic(
path.resolve(__dirname, '../static')
));
//文件二次處理，修改名稱
app.use((ctx) => {
var file = ctx.request.files.f1;//得道文件對象
var path = file.path;
var fname = file.name;//原文件名稱
var nextPath = path+fname;
if(file.size>0 && path){
//得到擴(kuò)展名
var extArr = fname.split('.');
var ext = extArr[extArr.length-1];
var nextPath = path+'.'+ext;
//重命名文件
fs.renameSync(path, nextPath);
}
//以 json 形式輸出上傳文件地址
ctx.body = `{
"fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
}`;
});
/**
* http server
*/
var server = http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ...... ');
復(fù)制代碼CODE
https://github.com/Bigerfe/fe-learn-code/
簡介】
拖放是一種常見的特性, 屬于html5標(biāo)準(zhǔn)的一部分, 即抓取對象以后拖動到另一個位置, 在html5中, 任何元素都可被設(shè)置拖放。首先, 我們要給需要拖動的HTML元素啟用拖動功能, 設(shè)置屬性draggable="true",
<div draggable="true"></div>提示：a標(biāo)簽和img標(biāo)簽?zāi)J(rèn)是啟用該屬性的, 可不需要設(shè)置draggable屬性。
draggable有三個值, 如下所示：
draggable = true(元素可以被拖動)
draggable = false(元素不能被拖動)
draggable = auto(瀏覽器可以自主決定某個元素是否可以被拖動)
【用法】
當(dāng)我們用鼠標(biāo)拖拽目標(biāo)元素過程中會觸發(fā)的事件：
ondragstart：用戶按下鼠標(biāo)開始拖動時觸發(fā)
ondrag：用戶正在拖動時反復(fù)觸發(fā)
ondragend：用戶結(jié)束拖動后觸發(fā)
<img id="imgs" ondragstart="startFun()" ondrag="ondragFun()" ondragend="ondragendFun()" src="../img/a.png"/>當(dāng)拖動元素進(jìn)入目標(biāo)容器內(nèi)觸發(fā)的事件：
ondragenter：鼠標(biāo)拖動對象進(jìn)入釋放區(qū)時觸發(fā)
ondragover：被拖動物體進(jìn)入目標(biāo)容器內(nèi)移動時反復(fù)觸發(fā)
ondragleave：拖動對象在釋放區(qū)沒有釋放就離開容器時觸發(fā)
ondrop：被拖動物體在目標(biāo)容器內(nèi)釋放時觸發(fā)
<div id="container" ondragenter="ondragenterFun(event)" ondragover="ondragoverFun(event)" ondragleave="ondragleaveFun()" ondrop="drop()"></div>
ondragenter和ondragover事件的默認(rèn)行為是拒絕接受任何被拖放的項目, 所以我們必須要做的最重要的事情就是防止這種默認(rèn)行為的發(fā)生。
因此, 我們只需要在這兩個事件調(diào)用的函數(shù)中傳入event對象, 使用event.preventDefault()就可取消這種默認(rèn)行為；舉個例子, 在drop事件時, Firefox瀏覽器會關(guān)閉網(wǎng)頁, 轉(zhuǎn)而顯示被拖動圖片img元素src所引用的地址。
取消元素默認(rèn)行為：
function ondragenterFun(e){
e.preventDefault();
}
function ondragoverFun(e){
e.preventDefault();
}在event對象中, 我們會使用dataTransfer屬性來獲取DataTransfer對象, 在DataTransfer對象中有我們操作數(shù)據(jù)的屬性和方法, 具體如下：
datatransfer：轉(zhuǎn)移釋放元素的數(shù)據(jù)到釋放區(qū), 返回Datatransfer對象
event.dataTransfer //返回DataTransfer對象
DataTransfer對象的屬性：
files：處理從操作系統(tǒng)拖動并釋放到釋放區(qū)的文件；
types：返回一個字符串?dāng)?shù)組, 該對象包含了dataTransfer對象中數(shù)據(jù)的所有類型；
items：返回DataTransferItems對象, 該對象代表了拖動數(shù)據(jù)；
dropEffect：設(shè)置拖放目標(biāo)允許發(fā)生的拖放行為, 如果此處設(shè)置的拖放行為不在effectAllowed屬性設(shè)置的可拖放行為內(nèi), 拖放操作將會失敗。該屬性值只允許為"null"、"copy"、"link"或"move"；
effectAllowed：設(shè)置拖動元素允許發(fā)生的拖動行為, 該屬性值可為"none"、"copy"、"copyLink"、"copyMove"、"link"、"linkMove"、"move"、"all"或"uninitialized"；
DataTransfer對象的方法：
setData( format , data )：將指定格式的數(shù)據(jù)賦值給dataTransfer對象，參數(shù)format定義數(shù)據(jù)的格式也就是數(shù)據(jù)的類型，data為待賦值的數(shù)據(jù)。
getData( format )：從dataTransfer對象中獲取指定格式的數(shù)據(jù)，format代表數(shù)據(jù)格式，data為數(shù)據(jù)。
clearData( [format] )：從dataTransfer對象中刪除指定格式的數(shù)據(jù)，參數(shù)可選，若不給參數(shù)，將刪除對象中所有的數(shù)據(jù)。
setDragImage(el, x, y)：設(shè)置拖放操作的圖標(biāo)，其中el代表自定義圖標(biāo)，x代表圖標(biāo)與鼠標(biāo)在水平方向上的距離，y代表圖標(biāo)與鼠標(biāo)在垂直方向上的距離。
了解了H5拖動使用的api以后我們接下來看一個綜合的案例, 功能如下：
1)、實現(xiàn)圖片拖動功能；
2)、實現(xiàn)圖片復(fù)制功能；
3)、過濾不能拖動的元素；
4)、實現(xiàn)拖動本地圖片到瀏覽器指定位置；
公共css部分：
<style>
#dropIn{
border:1px solid #AAAAAA;
height:100px;
margin-bottom: 10px;
padding: 10px;
}
#dropIn>img{
margin-right: 10px;
border:2px solid deepskyblue;
}
img{
width:100px;
border-radius: 10px;
border:2px solid red;
}
</style>html部分：
<body>
<div id="dropIn"></div> <!--釋放區(qū)-->
<img id="drop1" src="img/a.png" alt="" />
<!--拖動的圖片元素-->
</body>js部分：
<script type="text/javascript">
var darggID;
function getId(el){
return document.getElementById(el)
}
var dropId1 = getId("drop1");
var dropInId = getId("dropIn");
//取消事件默認(rèn)行為
dropInId.ondragenter = cancelDefault;
dropInId.ondragover = cancelDefault; //綁定拖動元素釋放時觸發(fā)的事件
dropInId.ondrop = drop; //綁定
dropId1.ondragstart = startFun;
function cancelDefault(ev){ //取消默認(rèn)行為
ev.preventDefault();
}
function startFun(ev){
darggID = ev.target.id;
//獲取被拖動元素的id
//從源對象上的事件處理中保存數(shù)據(jù)，數(shù)據(jù)類型為"Text"
ev.dataTransfer.setData("Text",darggID);
}
function drop(ev){
ev.preventDefault();
// 從目標(biāo)對象上的事件處理中讀取"Text"類型數(shù)據(jù)
var data=ev.dataTransfer.getData("Text");
// 插入到目標(biāo)對象中
ev.target.appendChild(document.getElementById(data));
}
</script>接下來我們添加兩張圖, "drop2"是實現(xiàn)復(fù)制的圖片, "drop3"是既不能復(fù)制也不能拖動的圖片；
<img id="drop2" src="img/b.png" alt="" /><img id="drop3" src="img/c.png" alt="" />添加js代碼：
//獲取頁面元素
var dropId2 = getId("drop2");
var dropId3 = getId("drop3");
//綁定事件
dropId2.ondragstart = startFun;dropId3.ondragstart = startFun;
//修改drop函數(shù)為
function drop(ev){
ev.preventDefault();
// 從目標(biāo)對象上的事件處理中讀取"Text"類型數(shù)據(jù)
var data=ev.dataTransfer.getData("Text");
if(data=='drop1'){
//移動
ev.target.appendChild(document.getElementById(data));
}
if(data=='drop2'){//復(fù)制
var nreEl=document.getElementById(darggID).cloneNode(false);
getId("dropIn").appendChild(nreEl);
}
if(data=='drop3'){//過濾drop3，drop3不做任何操作
alert('過濾drop3')
}
}接下來我們實現(xiàn)拖動本地圖片到瀏覽器, 我們就將圖片拖動到id為"dropIn"的這個div中；添加js:
/*document 監(jiān)聽drop 并阻止瀏覽器打開客戶端的圖片*/
document.ondragover = function (e) {
//只有在ondragover中阻止默認(rèn)行為
e.preventDefault();
};
document.ondrop = function (e) {
//阻止 document.ondrop的默認(rèn)行為
e.preventDefault();
};
//dropIn是div的id
dropIn.ondrop = function (e) {
var list = e.dataTransfer.files;
for (var i = 0; i < list.length; i++) {
var f = list[i];
reader(f);
}
};
function reader(f) {
var reader = new FileReader();
//讀取數(shù)據(jù)
reader.readAsDataURL(f);
reader.onload = function () {
var img = new Image();
img.src = reader.result;
dropIn.appendChild(img);
}
}【瀏覽器支持】
目前只有Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari5支持拖放，在 Safari5.1.2 中不支持拖放。
最后再和大家分享一個技巧, 這種拖動行為還能跨瀏覽器工作, 這里說的跨瀏覽器不是瀏覽器之間的跨窗口, 而是可以從Chrome瀏覽器拖動到Firefox瀏覽器, 因為拖放功能的支持是集成在操作系統(tǒng)里面的, 有著相同的特性。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
