nodejs利用ajax實(shí)現(xiàn)網(wǎng)頁(yè)無(wú)刷新上傳圖片實(shí)例代碼
通常情況下上傳圖片是要通過(guò)提交form表單來(lái)實(shí)現(xiàn)的,但是這又不可避免的產(chǎn)生了網(wǎng)頁(yè)轉(zhuǎn)。
利用ajax技術(shù)和FormData()對(duì)象可以有效的解決這個(gè)問(wèn)題
廢話不多說(shuō) 直接上關(guān)鍵代碼:
html部分
<div class="form-group"> <label>File input</label> <input type="file" name="file" id="file"> <p id="result"></p> <img id="img" src=""> </div> <button id="upload" class="btn btn-default">提交</button>
這里注意input標(biāo)簽的 type="file"
js部分:
function uploadFile(){
var file = document.getElementById("file")
var formData = new FormData();
formData.append('file',file.files[0]);
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
// async: false,
cache: false,
contentType: false,
processData: false,
success: function(data){
if(200 === data.code) {
$('#result').html("上傳成功!");
$('#img').attr('src',data.data);
} else {
$('#result').html("上傳失?。?);
}
console.log('imgUploader upload success');
},
error: function(){
$("#result").html("與服務(wù)器通信發(fā)生錯(cuò)誤");
}
});
}
function postPage() {
var uploada = document.getElementById('upload');
uploada.addEventListener("click",function () {
uploadFile();
},false);
}
window.onload = function () {
postPage();
}
nodejs部分:
var storage = multer.diskStorage({
destination: function (req, file, cb){
cb(null, './public/images')
},
filename: function (req, file, cb){
cb(null, file.originalname)
}
});
var upload = multer({
storage: storage
});
router.post('/upload', upload.single('file'), function (req, res, next) {
var url = 'http://' + req.headers.host + '/images/' + req.file.originalname
res.json({
code : 200,
data : url
})
});
multer是express官方推薦的文件上傳中間件。
文件上傳有以下方法
upload.single(‘file'), //適用于單文件上傳。 upload.array(‘file',num), //適用于多文件上傳,num為最多上傳個(gè)數(shù),上傳文件的數(shù)量可以小于num。
同時(shí)還提供了混合上傳,比如A類文件1個(gè),B類文件2個(gè)。官方API有詳細(xì)說(shuō)明。
file為上傳字段名稱,當(dāng)使用form表單submit方式上傳時(shí),必須與表單上傳的name屬性保持一致。
對(duì)上傳文件大小限制,名稱限制等均可在limits中加上,具體可加屬性,請(qǐng)參考官方api。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Nodejs+angularjs結(jié)合multiparty實(shí)現(xiàn)多圖片上傳的示例代碼
- NodeJS實(shí)現(xiàn)圖片上傳代碼(Express)
- 詳解nodejs實(shí)現(xiàn)本地上傳圖片并預(yù)覽功能(express4.0+)
- ajax +NodeJS 實(shí)現(xiàn)圖片上傳實(shí)例
- angular2+nodejs實(shí)現(xiàn)圖片上傳功能
- 圖片上傳之FileAPI與NodeJs
- nodejs 整合kindEditor實(shí)現(xiàn)圖片上傳
- 輕松創(chuàng)建nodejs服務(wù)器(10):處理上傳圖片
- nodejs 圖片預(yù)覽和上傳的示例代碼
相關(guān)文章
nodejs+express最簡(jiǎn)易的連接數(shù)據(jù)庫(kù)的方法
這篇文章主要介紹了nodejs+express 最簡(jiǎn)易的連接數(shù)據(jù)庫(kù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
NodeJs搭建本地服務(wù)器之使用手機(jī)訪問(wèn)的實(shí)例講解
今天小編就為大家分享一篇NodeJs搭建本地服務(wù)器之使用手機(jī)訪問(wèn)的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
零基礎(chǔ)實(shí)現(xiàn)node+express個(gè)性化聊天室的示例
這篇文章主要介紹了零基礎(chǔ)實(shí)現(xiàn)node+express個(gè)性化聊天室的示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
node錯(cuò)誤處理與日志記錄的實(shí)現(xiàn)
這篇文章主要介紹了node錯(cuò)誤處理與日志記錄的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
利用node實(shí)現(xiàn)數(shù)據(jù)庫(kù)數(shù)據(jù)導(dǎo)出到Excel
本文將詳細(xì)講解如何使用Node.js實(shí)現(xiàn)從MySQL數(shù)據(jù)庫(kù)獲取數(shù)據(jù),并生成包含多個(gè)工作表的 Excel 文件,每個(gè)工作表對(duì)應(yīng)數(shù)據(jù)庫(kù)中的一個(gè)表,有需要的可以了解下2024-11-11

