圖片上傳之FileAPI與NodeJs
HTML5之fileAPI
HTML5之fileAPI使得我們處理圖片上傳更加簡(jiǎn)單。
實(shí)例
html代碼
<div class="form-group"> <label for="modal_inputFile" class="col-md-3 control-label label-font">位置圖:</label> <div class="col-md-9"> <input type="text" readonly="" class="form-control" placeholder="點(diǎn)擊選擇文件"> <input type="file" id="modal_inputFile"> <img src="" class="img-responsive" id="modal-pre" alt="預(yù)覽區(qū)" style="max-height: 300px"> </div> </div>
效果:
這里我們可以通過(guò)$("#modal_inputFile")[0].files[0]來(lái)獲取到圖片的信息。
這里有name,size,type這幾個(gè)我們常用的屬性。
實(shí)現(xiàn)預(yù)覽
選擇好圖片后,我們都希望會(huì)有個(gè)預(yù)覽功能。這個(gè)html5也為我們想到了。
他提供了FileReader這個(gè)新的對(duì)象給我們。
FileReader該接口主要用來(lái)把文件讀入內(nèi)存,并且讀取文件中的數(shù)據(jù)。
這樣我們就可以通過(guò)date url來(lái)實(shí)現(xiàn)預(yù)覽了。
var file = document.getElementById(modal_inputFile'').files[0]; if (!file) { return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e) { var ib_pre = document.getElementById('modal-pre'); ib_pre.src = this.result; }
這樣就實(shí)現(xiàn)了預(yù)覽。
我們?cè)賮?lái)查看下img的src。
<img src="data:image/png;base64,iVBORXXXXXXXXXXXXX....XXXXXXX" class="img-responsive" id="modal-pre" alt="預(yù)覽區(qū)" style="max-height: 300px">
src是base64編碼。
與后臺(tái)對(duì)接
既然前端使用文件API能滿足我們的需求,那我們接下來(lái)就需要上傳到服務(wù)端了。當(dāng)仁不讓的就是NodeJs了。
前端請(qǐng)求
下面是前端發(fā)起請(qǐng)求的例子:
//圖片上傳 $('#preUpload').on('click', function(e) { var data = new FormData(); var _files = $("#modal_inputFile")[0].files[0]; var ect = ($("#modal_inputFile")[0].files[0]).name.split('.')[1]; if(ect !== 'png'){ alert('請(qǐng)上傳png圖片!') return; } data.append("modal_file", _files); $.ajax({ type: 'post', dataType: 'json', url: window.stnt_hosts + 'thirdAdmanage/upload/modal', data: data, contentType: false, processData: false }).done(function(data, status) { console.log('上傳成功'); }).fail(function(err) { console.log('上傳失敗'); }) })
這里通過(guò)FormData來(lái)處理我們需要上傳的數(shù)據(jù)。
這里的data數(shù)據(jù)是一個(gè)序列過(guò)的對(duì)象。后臺(tái)接受就行了。
后端處理
服務(wù)端我們使用node-formidable來(lái)處理圖片的保存等操作。
見(jiàn)代碼:
var formidable = require("formidable"); var form = new formidable.IncomingForm(); //臨時(shí)目錄 form.uploadDir = './upload/'; //預(yù)覽圖片上傳 router.post('/upload/modal', function(req, res, next) { form.parse(req, function(err, fields, files) { if (files.modal_file) { rename(files.modal_file.path, files.modal_file.name, 'preview') res.send({ stats:'success', data:[] }) } }) }); function rename(old, _new, code, bId) { var path = './upload/' + code + '/'; fs.exists(path, function(exists) { if (!exists) { fs.mkdir(path) console.log('創(chuàng)建文件夾!') } fs.renameSync(old, path + _new, function(err) { if (err) { console.log(err); return; } console.log('上傳成功!') }) }) }
這里使用fs.renameSync的原因是,我們里面設(shè)置的臨時(shí)目錄form.uploadDir是存在于內(nèi)存中的數(shù)據(jù),并不是真正的圖片。
類似這樣
我們需要通過(guò)fs的方法,將文件重新保存到我們需要的地方即可。這時(shí)候就是圖片了。
最后
這里的form.parse(req, function(err, fields, files)中的fields與files到底是什么對(duì)象,一定要自己調(diào)試著看??赐昴憔兔靼资鞘裁戳?。
之前我不清楚的時(shí)候就是打開(kāi)瀏覽器就搜索,結(jié)果可想而知很慘,幾乎全是錯(cuò)的。
所以不清楚的話一定要去查github。
還有app.use(bodyParser.urlencoded({ extended: true }));的作用是用來(lái)解析我們通常的form表單提交的數(shù)據(jù),也就是請(qǐng)求頭中包含這樣的信息: Content-Type: application/x-www-form-urlencoded
app.use(bodyParser.json())是用來(lái)解析json的。
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- Nodejs+angularjs結(jié)合multiparty實(shí)現(xiàn)多圖片上傳的示例代碼
- NodeJS實(shí)現(xiàn)圖片上傳代碼(Express)
- 詳解nodejs實(shí)現(xiàn)本地上傳圖片并預(yù)覽功能(express4.0+)
- nodejs利用ajax實(shí)現(xiàn)網(wǎng)頁(yè)無(wú)刷新上傳圖片實(shí)例代碼
- ajax +NodeJS 實(shí)現(xiàn)圖片上傳實(shí)例
- angular2+nodejs實(shí)現(xiàn)圖片上傳功能
- nodejs 整合kindEditor實(shí)現(xiàn)圖片上傳
- 輕松創(chuàng)建nodejs服務(wù)器(10):處理上傳圖片
- nodejs 圖片預(yù)覽和上傳的示例代碼
相關(guān)文章
bootstrap 通過(guò)加減按鈕實(shí)現(xiàn)輸入框組功能
這篇文章主要介紹了bootstrap 輸入框組 通過(guò)加減按鈕來(lái)增加刪除內(nèi)嵌輸入框組,當(dāng)我點(diǎn)擊 + 按鈕時(shí),會(huì)添加一行輸入框組;當(dāng)點(diǎn)擊 - 按鈕時(shí),會(huì)刪除這一行輸入框組。具體實(shí)現(xiàn)代碼大家參考下本文2017-11-11前端項(xiàng)目中報(bào)錯(cuò)Uncaught?(in?promise)的解決方法
最近在做項(xiàng)目的時(shí)候控制臺(tái)報(bào)了一個(gè)錯(cuò)Uncaught(in promise) false,這篇文章主要給大家介紹了關(guān)于前端項(xiàng)目中報(bào)錯(cuò)Uncaught?(in?promise)的解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04JavaScript解析json格式數(shù)據(jù)簡(jiǎn)單示例
這篇文章主要介紹了JavaScript解析json格式數(shù)據(jù)簡(jiǎn)單示例,本文通過(guò)for循環(huán)來(lái)獲取json結(jié)點(diǎn)數(shù)據(jù),需要的朋友可以參考下2014-12-12微信小程序使用第三方庫(kù)Immutable.js實(shí)例詳解
Immutable 是 Facebook 開(kāi)發(fā)的不可變數(shù)據(jù)集合。不可變數(shù)據(jù)一旦創(chuàng)建就不能被修改,是的應(yīng)用開(kāi)發(fā)更簡(jiǎn)單,允許使用函數(shù)式編程技術(shù),比如惰性評(píng)估。微信小程序無(wú)法直接使用Immutable.js,下面就來(lái)說(shuō)說(shuō)微信小程序如何使用第三方庫(kù)Immutable.js。2016-09-09Moment.js 不容錯(cuò)過(guò)的超棒Javascript日期處理類庫(kù)
moment.js是一個(gè)輕量級(jí)并且健壯的js日期處理類庫(kù),相信大家在javascript開(kāi)發(fā)過(guò)程中,都自己動(dòng)手寫(xiě)過(guò),或者使用google和百度搜索過(guò)相關(guān)的實(shí)現(xiàn)函數(shù)2012-04-04