php js jquery功能片段#
唯一需求:表格id。
注意:因提交數(shù)據(jù)不能包含\n,所以要替換。呈現(xiàn)時可以替換回?fù)Q行符。
<script type="text/javascript">
/**
* 遍歷表格內(nèi)容后返回數(shù)組
* @param string id 表格id
* @return Array 或者JSON
*/
function getTableContent(id) {
var mytable = document.getElementById(id);
var data = [];
var tmpTxt;
for(var i = 0, rows = mytable.rows.length; i < rows; i++) {
for(var j = 0, cells = mytable.rows[i].cells.length; j < cells; j++) {
if(!data[i]) {
data[i] = new Array();
}
tmpTxt = mytable.rows[i].cells[j].innerHTML;
//tmpTxt = tmpTxt.replace(/<[^>]+>/gi,'');//過濾全部的html標(biāo)簽,不包括內(nèi)容
//tmpTxt =tmpTxt.replace(/\s/gi,'');
tmpTxt =tmpTxt.replace(/\n/gi,'<br>');
//data[i][j] = tmpTxt;
data[i][j] = tmpTxt.replace(/ /g, ""); //替換全角空格
}
}
//var JSONdata=data;
var JSONdata = JSON.stringify(data); //序列化數(shù)組JSON.stringify(data) 反序列化數(shù)組JSON.parse(data)
return JSONdata;
//return data;//返回數(shù)組
}
</script>
今年國慶假期終于可以憋在家里了不用出門了,不用出去看后腦了,真的是一種享受。這么好的光陰怎么浪費,睡覺、吃飯、打豆豆這怎么可能(耍多了也煩),完全不符合我們程序員的作風(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/
在學(xué)習(xí)異步提交表單之前,先來學(xué)習(xí)幾個JQuery方法和屬性。
1、serialize():序列表格內(nèi)容為字符串。如下:
queryBean.orderBy=OPERATE_TIME&queryBean.orderSequnce=DESC&queryBean.title=&queryBean.province=&queryBean.city=&selectID=ad78f509f2bc412fb9fe16e36d227a11&queryBean.orderBy=OPERATE_TIME&queryBean.orderSequnce=DESC&queryBean.page.intPage=1
2、serializeArray():序列化表格元素 (類似 ‘.serialize()’ 方法) 返回 JSON 數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)。
注意,此方法返回的是JSON對象而非JSON字符串。需要使用插件或者第三方庫進(jìn)行字符串化操作。
返回的JSON對象是由一個對象數(shù)組組成的,其中每個對象包含一個或兩個名值對——name參數(shù)和value參數(shù)(如果value不為空的話)。舉例來說:
[ { "name": "firstname", "value": "Hello" }, { "name": "lastname", "value": "World" }, { "name": "alias" } ]
3、data屬性:發(fā)送到服務(wù)器的數(shù)據(jù)。將自動轉(zhuǎn)換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉(zhuǎn)換。必須為 Key/Value 格式。如果為數(shù)組,jQuery 將自動為不同值對應(yīng)同一個名稱。如 {foo:[“bar1”, “bar2”]} 轉(zhuǎn)換為 “&foo=bar1&foo=bar2”。
4、dataType屬性:預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定,jQuery 將自動根據(jù) HTTP 包 MIME 信息來智能判斷,比如XML MIME類型就被識別為XML。在1.4中,JSON就會生成一個JavaScript對象,而script則會執(zhí)行這個腳本。隨后服務(wù)器端返回的數(shù)據(jù)會根據(jù)這個值解析后,傳遞給回調(diào)函數(shù)。可用值:
“xml”: 返回 XML 文檔,可用 jQuery 處理。“script”: 返回純文本 JavaScript 代碼。不會自動緩存結(jié)果。除非設(shè)置了”cache”參數(shù)。”’注意:”’在遠(yuǎn)程請求時(不在同一個域下),所有POST請求都將轉(zhuǎn)為GET請求。(因為將使用DOM的script標(biāo)簽來加載)。“json”: 返回 JSON 數(shù)據(jù) 。“jsonp”: JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時,如 “myurl?callback=?” jQuery 將自動替換 ? 為正確的函數(shù)名,以執(zhí)行回調(diào)函數(shù)。“text”: 返回純文本字符串
<script type="text/javaScript"> $.ajax({ url:"mobileSurveyAction_addSurvey.action",//提交地址 data:$("#form1").serialize(),//將表單數(shù)據(jù)序列化 type:"POST", dataType:"json", success:function(result){ if (result.success == '100'){ $("#mySection").hide(); $(".footer").hide(); $("#alertMsg").show(); }else{ alert("失敗!"); } } }); </script>
二、submit方式
有時在A頁面點擊按鈕彈出一個form表單,在填完表單后提交成功后,需要關(guān)閉表單頁并將表單中的某些值反應(yīng)在A頁面上,這時就需要異步提交表單。其實也挺簡單,只是需要把表單數(shù)據(jù)序列化。
<script type="text/javaScript"> $("#form1").submit(function (){ var ajax_url = "yourActionUrl"; //表單目標(biāo) var ajax_type = $(this).attr('method'); //提交方法 var ajax_data = $(this).serialize(); //表單數(shù)據(jù) $.ajax({ type:ajax_type, //表單提交類型 url:ajax_url, //表單提交目標(biāo) data:ajax_data, //表單數(shù)據(jù) success:function(msg){ if(msg == 'success'){//msg 是后臺調(diào)用action時,你傳過來的參數(shù) //do things here window.close(); }else{ //do things here } } }); //return false; //止表單的默認(rèn)提交事件 }); </script>
三、submit方式2
<html> <head> <script type="text/javaScript"> jQuery(document).ready(function (){ jQuery('#search_form').bind("submit", function(){ var key_word = jQuery("#keyword").val(); if(key_word == ""){ return false; } var options = { url: '/portrait/user_info_display?user_info_keyword=' + key_word, type: 'post', dataType: 'text', data: $("#search_form").serialize(), success: function (data) { if (data.length > 0){ jQuery("#user_info").html(data); } } }; $.ajax(options); return false; }); $('#search').click(function(){ $('#search_form').submit(); }); }); </script> </head> <body> <form mothod="post" id="search_form"> <div class="cf"> <label class="search-bar"> <input id="keyword" placeholder="請輸入搜索關(guān)鍵詞" name="user_info_keyword" type="text" value="" class="input-search"> <a id="search" class="btn-search"> <i class="icon-search"></i> </a> <a href="javascript:;" class="btn-more"></a> </label> </div> </form> </body> </html>
代碼完成了兩個功能:1.輸入關(guān)鍵詞后按回車,會向server發(fā)送一個POST請求,然后異步提交表單,刷新部分頁面;2.輸入關(guān)鍵詞后,點擊查詢按鈕,也可異步刷新部分頁面。
此時要注意表單提交后發(fā)送的是POST請求,而點擊按鈕會發(fā)送一個GET請求,所以我們可以通過jQuery,使得按鈕點擊時觸發(fā)表單提交,這樣后端就不用再寫代碼處理GET請求。
為什么在這里說的是模擬呢?因為我們其實是將返回結(jié)果放在了一個隱藏的iframe中,所以才沒有使當(dāng)前頁面跳轉(zhuǎn),感覺就像是異步操作一樣。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta charset="UTF-"> <title>隱藏的iframe上傳文件</title> <script type="text/javascript" src="jquery路徑..."></script> </head> <body> <iframe name="frm" style="display: none"></iframe> <form action="/upload" enctype="multipart/form-data" method="post" target="frm" onsubmit="loading(true);"> <p id="upfile"> 附件:<input type="file" name="myfile" style="display: inline"> </p> <p id="upbtn"> <input style="padding-left: px; padding-right: px;" type="submit" value="異步上傳"> <span id="uptxt" style="display: none">正在上傳...</span> </p> </form> <div id="flist" style="border: px dotted darkgray;"></div> <script> // 上傳完成后的回調(diào) function uploadFinished(fileName) { addToFlist(fileName); loading(false); } function addToFlist(fname) { var temp = ["<p id='" + fname + "'>",fname,"<button onclick='delFile(\""+fname+"\");'>刪除</button>","</p>"]; $("#flist").append(temp.join("")); } function loading(showloading) { if (showloading) { $("#uptxt").show(); } else { $("#uptxt").hide(); } } </script> </body> </html>
這種技術(shù)有兩個關(guān)鍵的地方:
如何與主頁面通信呢?
我們用nodejs在接收完了文件后返回了一個window.parent.主頁面定義的方法,執(zhí)行后可以得知文件上傳完成。代碼很簡單:
router.post('/upload', multipartMiddleware, function(req, res) { var fpath = req.files.myfile.path; var fname = fpath.substr(fpath.lastIndexOf('\\') + ); setTimeout(function() { var ret = ["<script>","window.parent.uploadFinished('"+fname+"');","</script>"]; res.send(ret.join("")); }, ); });
五、使用XMLHttpRequest2來進(jìn)行真正的異步上傳
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>xhr level 異步上傳</title> <script type="text/javascript" src="jquery路徑..."></script> </head> <body> <div> <p id="upfile"> 附件:<input type="file" id="myfile" style="display: inline"> </p> <p id="upbtn"> <input style="padding-left: px; padding-right: px;" type="button" value="異步上傳" onclick="upload();"> <span id="uptxt" style="display: none">正在上傳...</span> <span id="upprog"></span> <button id="stopbtn" style="display: none;">停止上傳</button> </p> </div> <div id="flist" style="border: px dotted darkgray;"></div> <script> function upload() { // 準(zhǔn)備FormData var fd = new FormData(); fd.append("myfile", $("#myfile")[0].files[0]); // 創(chuàng)建xhr對象 var xhr = new XMLHttpRequest(); // 監(jiān)聽狀態(tài),實時響應(yīng) // xhr 和 xhr.upload 都有progress事件,xhr.progress是下載進(jìn)度,xhr.upload.progress是上傳進(jìn)度 xhr.upload.onprogress = function(event) { if (event.lengthComputable) { var percent = Math.round(event.loaded / event.total); console.log('%d%', percent); $("#upprog").text(percent); } }; // 傳輸開始 xhr.onloadstart = function(event) { console.log('load start'); $("#upprog").text('開始上傳'); $("#stopbtn").one('click', function() { xhr.abort(); $(this).hide(); }); loading(true); }; // ajax過程成功完成事件 xhr.onload = function(event) { console.log('load success'); $("#upprog").text('上傳成功'); console.log(xhr.responseText); var ret = JSON.parse(xhr.responseText); addToFlist(ret.fname); }; // ajax過程發(fā)生錯誤事件 xhr.onerror = function(event) { console.log('error'); $("#upprog").text('發(fā)生錯誤'); }; // ajax被取消 xhr.onabort = function(event) { console.log('abort'); $("#upprog").text('操作被取消'); }; // loadend傳輸結(jié)束,不管成功失敗都會被觸發(fā) xhr.onloadend = function (event) { console.log('load end'); loading(false); }; // 發(fā)起ajax請求傳送數(shù)據(jù) xhr.open('POST', '/upload', true); xhr.send(fd); } function addToFlist(fname) { var temp = ["<p id='" + fname + "'>",fname,"<button onclick='delFile(\"" + fname + "\");'>刪除</button>","</p>"]; $("#flist").append(temp.join("")); } function delFile(fname) { console.log('to delete file: ' + fname); // TODO: 請實現(xiàn) } function loading(showloading) { if (showloading) { $("#uptxt").show(); $("#stopbtn").show(); } else { $("#uptxt").hide(); $("#stopbtn").hide(); } } </script> </body> </html>
代碼有點多,但是通俗易懂。使用過AJAX的人都知道,XHR對象提供了一個onreadystatechange的回調(diào)方法來監(jiān)聽整個請求/響應(yīng)過程。在XMLHttpRequest2級規(guī)范中又多了幾個進(jìn)度事件。有以下6個事件:
1.loadstart: 在接收到響應(yīng)數(shù)據(jù)的第一個字節(jié)時觸發(fā)。
2.progress: 在接收響應(yīng)期間持續(xù)不斷地觸發(fā)。
3.error: 在請求發(fā)生錯誤時觸發(fā)。
4.abort: 在因為調(diào)用abort()方法而終止連接時觸發(fā)。
5.load: 在接收到完整的響應(yīng)數(shù)據(jù)時觸發(fā)。
6.loadend: 在通信完成或者觸發(fā)error,abort,load事件后觸發(fā)。
這次我們可以解讀代碼:當(dāng)傳輸事件開始后,我們便在停止傳送按鈕上添加點擊事件,內(nèi)置了abort方法可以停止傳送。若不點則會正常上傳直到傳送完畢為止。其后臺代碼類似第二種方法。
FormData的詳細(xì)介紹及使用請點擊此處,那里對FormData的方法和事件已經(jīng)表述的非常清楚,這里就不再浪費時間在介紹一遍了。本文主要針對FormData對象的使用以及異步文件上傳進(jìn)行詳細(xì)的說明。
FormData對象可以讓我們組織一個使用XMLHttpRequest對象發(fā)送的鍵值對的集合。它主要用于發(fā)送表單數(shù)據(jù),但是可以獨立于使用表單傳輸?shù)臄?shù)據(jù)。
你可以創(chuàng)建一個你自己的FormData對象,然后通過append() 方法向?qū)ο笾刑砑渔I值對,就像下面這樣:
var formData = new FormData(); formData.append("username", "Groucho"); formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456" // HTML file input, chosen by user formData.append("userfile", fileInputElement.files[0]); // JavaScript file-like object var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file... var blob = new Blob([content], { type: "text/xml"}); formData.append("webmasterfile", blob); var request = new XMLHttpRequest(); request.open("POST", "http://foo.com/submitform.php"); request.send(formData);
注意:字段”userfile” 和 “webmasterfile” 都包含文件(file)。被分配到字段”accountnum”上的數(shù)字直接被FormData.append()方法轉(zhuǎn)換成了字符串(字段的值(value)可能是一個Blob, File, 或一個string:如果值既不是Blob也不是File,則值會被轉(zhuǎn)換成一個string)。
這個例子創(chuàng)建了一個FormData實例,其中包含字段”username”, “accountnum”, “userfile” 和 “webmasterfile”,然后使用XMLHttpRequest對象的send()方法去發(fā)送表單數(shù)據(jù)。字段”webmasterfile”是一個Blob。一個Blob對象代表一個文件對象的原始數(shù)據(jù)。但是Blob代表的數(shù)據(jù)不必須是javascript原生格式的數(shù)據(jù)。文件接口是基于Blob,繼承Blob功能和擴(kuò)大它對用戶文件系統(tǒng)的支持。為了構(gòu)建一個Blob可以調(diào)用Blob()構(gòu)造函數(shù)。
為了獲得一個包含已存在表單數(shù)據(jù)的FormData對象,在創(chuàng)建FormData對象的時候需要指定表單元素。
var formData = new FormData(someFormElement);
就像下面這樣:
var formElement = document.querySelector("form"); var request = new XMLHttpRequest(); request.open("POST", "submitform.php"); request.send(new FormData(formElement));
你也可以在獲得FormData對象之后增加另外的數(shù)據(jù),就像下面這樣:
var formElement = document.querySelector("form"); var formData = new FormData(formElement); var request = new XMLHttpRequest(); request.open("POST", "submitform.php"); formData.append("serialnumber", serialNumber++); request.send(formData);
這樣你可以在發(fā)送之前增加額外的信息,不一定是用戶編輯的。
你可以使用FormData發(fā)送文件。簡單的<form>中在包含一個<input>元素就可以:
<form enctype="multipart/form-data" method="post" name="fileinfo"> <label>Your email address:</label> <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> <label>Custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="32" /><br /> <label>File to stash:</label> <input type="file" name="file" required /> <input type="submit" value="Stash the file!" /> </form> <div></div>
然后你可以使用下面的代碼去發(fā)送:
var form = document.forms.namedItem("fileinfo"); form.addEventListener('submit', function(ev) { var oOutput = document.querySelector("div"), oData = new FormData(form); oData.append("CustomField", "This is some extra data"); var oReq = new XMLHttpRequest(); oReq.open("POST", "stash.php", true); oReq.onload = function(oEvent) { if (oReq.status == 200) { oOutput.innerHTML = "Uploaded!"; } else { oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>"; } }; oReq.send(oData); ev.preventDefault(); }, false);
你也可以直接向FormData對象中添加File或Blob,就像下面這樣:
data.append("myfile", myBlob, "filename.txt");
當(dāng)使用append() 方法的時候,可能會使用到第三個參數(shù)去發(fā)送文件名稱(通過Content-Disposition頭發(fā)送到服務(wù)器)。如果沒有指定第三個參數(shù)或這個參數(shù)不被支持的話,第三個參數(shù)默認(rèn)是”blob”。
如果你設(shè)置好正確的options,你也可以和jQuery配合起來使用:
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。