今年國慶假期終于可以憋在家里了不用出門了,不用出去看后腦了,真的是一種享受。這么好的光陰怎么浪費,睡覺、吃飯、打豆豆這怎么可能(耍多了也煩),完全不符合我們程序員的作風,趕緊起來把文章寫完。
這篇文章比較基礎,在國慶期間的業余時間寫的,這幾天又完善了下,力求把更多的前端所涉及到的關于文件上傳的各種場景和應用都涵蓋了,若有疏漏和問題還請留言斧正和補充。
以下是本文所涉及到的知識點,break or continue ?
原理很簡單,就是根據 http 協議的規范和定義,完成請求消息體的封裝和消息體的解析,然后將二進制內容保存到文件。
我們都知道如果要上傳一個文件,需要把 form 標簽的enctype設置為multipart/form-data,同時method必須為post方法。
那么multipart/form-data表示什么呢?
multipart互聯網上的混合資源,就是資源由多種元素組成,form-data表示可以使用HTML Forms 和 POST 方法上傳文件,具體的定義可以參考RFC 7578。
multipart/form-data 結構
看下 http 請求的消息體
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次請求要上傳文件,其中boundary表示分隔符,如果要上傳多個表單項,就要使用boundary分割,每個表單項由———XXX開始,以———XXX結尾。
每一個表單項又由Content-Type和Content-Disposition組成。
Content-Disposition: form-data 為固定值,表示一個表單元素,name 表示表單元素的 名稱,回車換行后面就是name的值,如果是上傳文件就是文件的二進制內容。
Content-Type:表示當前的內容的 MIME 類型,是圖片還是文本還是二進制數據。
解析
客戶端發送請求到服務器后,服務器會收到請求的消息體,然后對消息體進行解析,解析出哪是普通表單哪些是附件。
可能大家馬上能想到通過正則或者字符串處理分割出內容,不過這樣是行不通的,二進制buffer轉化為string,對字符串進行截取后,其索引和字符串是不一致的,所以結果就不會正確,除非上傳的就是字符串。
不過一般情況下不需要自行解析,目前已經有很成熟的三方庫可以使用。
至于如何解析,這個也會占用很大篇幅,后面的文章在詳細說。
使用 form 表單上傳文件
在 ie時代,如果實現一個無刷新的文件上傳那可是費老勁了,大部分都是用 iframe 來實現局部刷新或者使用 flash 插件來搞定,在那個時代 ie 就是最好用的瀏覽器(別無選擇)。
DEMO
這種方式上傳文件,不需要 js ,而且沒有兼容問題,所有瀏覽器都支持,就是體驗很差,導致頁面刷新,頁面其他數據丟失。
HTML
<form method="post" action="http://localhost:8100" enctype="multipart/form-data">
選擇文件:
<input type="file" name="f1"/> input 必須設置 name 屬性,否則數據無法發送<br/>
<br/>
標題:<input type="text" name="title"/><br/><br/><br/>
<button type="submit" id="btn-0">上 傳</button>
</form>
復制代碼
服務端文件的保存基于現有的庫koa-body結合 koa2實現服務端文件的保存和數據的返回。
在項目開發中,文件上傳本身和業務無關,代碼基本上都可通用。
在這里我們使用koa-body庫來實現解析和文件的保存。
koa-body 會自動保存文件到系統臨時目錄下,也可以指定保存的文件路徑。
然后在后續中間件內得到已保存的文件的信息,再做二次處理。
NODE
/**
* 服務入口
*/
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: {
//設置文件的默認保存目錄,不設置則保存在系統臨時目錄下 os
uploadDir: path.resolve(__dirname, '../static/uploads')
},
multipart: true // 開啟文件上傳,默認是關閉
}));
//開啟靜態文件訪問
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){
//得到擴展名
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 ...... ');
復制代碼
CODE
https://github.com/Bigerfe/fe-learn-code/
avaScript是基于事件驅動的編程模型,當網頁頁面發生某種形式的交互操作或者變化時就會產生事件。舉個簡單的例子:用戶在網頁頁面點擊鼠標按鍵就會產生一個點擊事件。鼠標移動則會產生鼠標移動的事件。因此事件對于JavaScript客戶端腳本語言至關重要,在JavaScript編程模型中事件是實現一切前端交互操作的基礎與依據。事件的學習、理解與使用成為JavaScript編程學習的重點與難點。本文主要介紹部分常用事件及事件處理。
event事件
1、事件的類型與事件處理
在面向對象程序設計語言中,事件是依附于對象的。不同的對象具有不同類型的事件類型及事件處理的方法。JavaScript中一個事件主要由事件對象、事件類型與事件處理三部分所組成。JavaScript常用事件類型主要包括鍵盤事件、鼠標與滾輪事件、頁面事件、表單事件、設備事件等。在頁面運行過程中,JavaScript通過事件類型,檢測發生的事件,并對事件進行處理。事件處理程序響應事件、處理時間需要按照一定的順序執行,事件順序主要包括事件捕獲與時間冒泡兩種類型。其中事件捕獲從HTML最外層開始處理事件,直到底層元素事件的處理完成。事件冒泡則與事件捕獲相反,從子元素開始響應事件。在默認情況下消息響應都是從子元素開始的。
冒泡處理實例
冒泡處理實例如上圖,div元素嵌套,將兩個div分為父元素與子元素,同樣定義onclick單擊事件,首先響應的是內層子元素。
2、事件的綁定
除直接在對HTML元素直接定義事件屬性之外,還可以通過事件綁定形式實現事件的注冊、綁定與監聽。通過調用DOM文檔對象模型提供的addEventListener()方法實現為網頁頁面元素添加事件,該函數的原型描述如下:
addEventListenser(type,listener [,options ]) type:事件類型 listener:事件處理函數名稱 options: bool類型,事件處理方式,捕獲、冒泡
通過對DOM對象進行事件綁定就可以響應制定的消息,但需注意,頁面元素能夠響應的事件類型。事件綁定實例描述如下:
事件監聽與處理
事件綁定實例如上圖所示,我們給id為test的div元素綁定了click事件,并用myfun函數對事件進行處理。其中事件類型是需要編寫者注意的問題,這些事件類型是定義好的,我們只需要選擇即可,例如鼠標事件的定義如下表所示:
鼠標事件類型
除以上事件綁定之外,還可以通過以下簡單形式綁定事件,如上例題事件可通過一下語句定義:
事件綁定的簡單形式
3、事件的解除
通常情況下事件的綁定執行之后是不會移除事件的,但如果需要解除事件的綁定,則可以通過removeEventListener()方法或者對綁定事件的DOM對象對應時間名賦值為null實現事件的解除。實際案例如下所示:
事件移除操作
4、event對象
event對象是JavaScript語言中重要的對象之一,用于存儲記錄交互響應實現相關基本信息,event對象主要存儲信息包括事件類型、事件對應的按鍵信息及事件發生相關坐標信息等。event對象是其他各類事件的父類,其他事件對象均為該類的子類。event對象會在事件調用過程中以隱藏的形式進行參數的傳遞。event事件使用描述如下圖:
event事件使用實例
以上給出了JavaScript中的事件基本概念及案例分析,如有問題可在評論區討論。本頭條號長期關注編程資訊分享;編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見,可以聯系作者,共同探討。期待大家關注!相關文章鏈接如下:
前端開發-JavaScript初學者練習題及參考答案
前端開發-CSS3動畫實現焦點(圖文輪播)圖效果
前端開發-JavaScript DOM動態生成文本框
前端設計-教你如何快速繪制HTML5動畫
前端設計-響應式頁面開發基礎
前端設計-Ajax技術及實例展示
var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
用方法:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。