文件上傳是每個(gè)網(wǎng)站不可避免的，最近需要做些上傳圖片的功能，主要解決兩個(gè)問題，一個(gè)是文件上傳樣式和服務(wù)端路徑保存，功能很簡單，做起來倒是沒那么簡單，先從最簡單的頁面的上傳頁面的樣式開始。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比金寨網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式金寨網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋金寨地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。
頁面樣式
Html頁面默認(rèn)的上傳的是比較難看的，需要重做一個(gè)背景圖片，通過背景圖片添加上傳的圖片:
上傳圖片樣式:
CSS樣式:
重慶分公司
重慶分公司
.upload-container {
background-image: url(../../images/rv/add.jpg);
background-repeat: no-repeat;
width: 180px;
height: 200px;
padding-bottom: 10px;
display: inline-block;
vertical-align: middle;
.fileupload {
opacity: 0;
filter: alpha(opacity=0);
width: 200px;
height: 200px;
}
}
Html點(diǎn)擊上傳有兩種比較常用的方式iFrame上傳和Ajax上傳，本文采用了Ajax上傳是HTML5提出了XMLHttpRequest對象的第二版，傳遞文件數(shù)據(jù)主要是通過FormData實(shí)現(xiàn):
$('.fileupload').change(function(event) {
/* Act on the event */
if ($('.fileupload').val().length) {
var fileName = $('.fileupload').val();
var extension = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase();
if (extension == ".jpg" || extension == ".png") {
var data = new FormData();
data.append('upload', $('#fileToUpload')[0].files[0]);
$.ajax({
url: 'apply/upload',
type: 'POST',
data: data,
cache: false,
contentType: false, //不可缺參數(shù)
processData: false, //不可缺參數(shù)
success: function(data) {
console.log(data);
},
error: function() {
console.log('error');
}
});
}
}
});
服務(wù)端保存
NodeJS服務(wù)端保存需要使用了第三方插件node-formidable，npm安裝地址:
npm install formidable@latest
上傳圖片
var cacheFolder = 'public/images/uploadcache/';
exports.upload = function(req, res) { var currentUser = req.session.user; var userDirPath =cacheFolder+ currentUser.id; if (!fs.existsSync(userDirPath)) { fs.mkdirSync(userDirPath); } var form = new formidable.IncomingForm(); //創(chuàng)建上傳表單 form.encoding = 'utf-8'; //設(shè)置編輯 form.uploadDir = userDirPath; //設(shè)置上傳目錄 form.keepExtensions = true; //保留后綴 form.maxFieldsSize = 2 * 1024 * 1024; //文件大小 form.type = true; var displayUrl; form.parse(req, function(err, fields, files) { if (err) { res.send(err); return; } var extName = ''; //后綴名 switch (files.upload.type) { case 'image/pjpeg': extName = 'jpg'; break; case 'image/jpeg': extName = 'jpg'; break; case 'image/png': extName = 'png'; break; case 'image/x-png': extName = 'png'; break; } if (extName.length === 0) { res.send({ code: 202, msg: '只支持png和jpg格式圖片' }); return; } else { var avatarName = '/' + Date.now() + '.' + extName; var newPath = form.uploadDir + avatarName; displayUrl = UPLOAD_FOLDER + currentUser.id + avatarName; fs.renameSync(files.upload.path, newPath); //重命名 res.send({ code: 200, msg: displayUrl }); } }); };
不同用戶上傳置放在不同的位置，根據(jù)需求來設(shè)置，當(dāng)然也有可以每張圖片都給不同的id編號(hào)，推薦第三方uuid插件:https://github.com/broofa/node-uuid
文件重命名:
fs.renameSync(files.upload.path, newPath); //重命名
文件上傳進(jìn)度:
form.on('progress', function(bytesReceived, bytesExpected) {
});
node-formidable有很多官方API還有很多設(shè)置的選項(xiàng)，本文根據(jù)需求設(shè)置了幾項(xiàng)，有額外需求的可以參考官方地址~
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
