溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
HTML5之fileAPI
HTML5之fileAPI使得我們處理圖片上傳更加簡單。
實例
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="點擊選擇文件"> <input type="file" id="modal_inputFile"> <img src="" class="img-responsive" id="modal-pre" alt="預覽區(qū)" > </div> </div>
效果:
這里我們可以通過$("#modal_inputFile")[0].files[0]來獲取到圖片的信息。
這里有name,size,type這幾個我們常用的屬性。
實現(xiàn)預覽
選擇好圖片后，我們都希望會有個預覽功能。這個html5也為我們想到了。
他提供了FileReader這個新的對象給我們。
FileReader該接口主要用來把文件讀入內(nèi)存，并且讀取文件中的數(shù)據(jù)。
這樣我們就可以通過date url來實現(xiàn)預覽了。
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;
}
這樣就實現(xiàn)了預覽。
我們再來查看下img的src。
<img src="data:image/png;base64,iVBORXXXXXXXXXXXXX....XXXXXXX" class="img-responsive" id="modal-pre" alt="預覽區(qū)" >
src是base64編碼。
與后臺對接
既然前端使用文件API能滿足我們的需求，那我們接下來就需要上傳到服務端了。當仁不讓的就是NodeJs了。
前端請求
下面是前端發(fā)起請求的例子：
//圖片上傳
$('#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('請上傳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('上傳失敗');
})
})
這里通過FormData來處理我們需要上傳的數(shù)據(jù)。
這里的data數(shù)據(jù)是一個序列過的對象。后臺接受就行了。
后端處理
服務端我們使用node-formidable來處理圖片的保存等操作。
見代碼:
var formidable = require("formidable");
var form = new formidable.IncomingForm();
//臨時目錄
form.uploadDir = './upload/';
//預覽圖片上傳
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的原因是，我們里面設置的臨時目錄form.uploadDir是存在于內(nèi)存中的數(shù)據(jù)，并不是真正的圖片。
類似這樣
我們需要通過fs的方法，將文件重新保存到我們需要的地方即可。這時候就是圖片了。
最后
這里的form.parse(req, function(err, fields, files)中的fields與files到底是什么對象，一定要自己調(diào)試著看。看完你就明白是什么了。
之前我不清楚的時候就是打開瀏覽器就搜索，結(jié)果可想而知很慘，幾乎全是錯的。
所以不清楚的話一定要去查github。
還有app.use(bodyParser.urlencoded({ extended: true }));的作用是用來解析我們通常的form表單提交的數(shù)據(jù)，也就是請求頭中包含這樣的信息： Content-Type: application/x-www-form-urlencoded
app.use(bodyParser.json())是用來解析json的。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
