node.js 通過ajax上傳圖片

node.js 通過ajax上傳圖片
這個階段，利用晚上剩餘的時間用node.js+mongdb+express+jade去實現自己的一個部落格網站，裡面的發表部落格中需要用到上傳圖片，嵌入到自己用textarea標籤實現的markdown編輯器中。這部分實現是利用了html5的formData函數去實現

html代碼(jade)：

 

  
form#uploadfile
  
div.form-group
  
input#inputfile(type="file" name="inputfile")
  
p.help-block#upfiletip 只支援png和ipg格式的圖片上傳
  
button.btn.btn-success(type="button" onclick="upFile()") 上傳
 

ajax代碼(javascript):

 

  
//判斷圖片的格式是否是png/ipg的格式
 
  
function judgePhotoExt(name){

  
if(name.length === 0){

  
$("#upfiletip").css("color","red");

  
$("#upfiletip").text = "你沒有選擇任何圖片！！！"

  
return false;

  
}

  
var extName = name.substring(name.lastIndexOf('.'),name.length).toLowerCase();

  
if(extName != '.png' && extName != '.ipg'){

  
$("#upfiletip").css("color","red");

  
$("#upfiletip").text = "只支援png和ipg格式的格式的檔案!!!"

  
return false;

  
}

  
return true;

  
}

  


  
//上傳圖片檔案

  
function upFile(){

  
var filename = $("#inputfile").val();

  
if(judgePhotoExt(filename)){

  
var data = new FormData(); 
  
　　　　var files = $("#inputfile")[0].files;

  
if(files){

  
　　　　　　data.append("file", files[0]);

  
}

  
$.ajax({

  
url: '/blog/photo/new',

  
type: 'POST',

  
data: data,

  
async: false,

  
cache: false,

  
contentType: false,

  
processData: false,

  
success: function(data){

  
var text = $("#content-textarea").val();

  
text = text+"![圖片提示]("+data+")";

  
$("#content-textarea").val(text);

  
$('#imageModal').modal('hide');

  
},

  
error: function(err){

  
console.log(err);

  
}

  
})

  
}

  
} 
 

注意：其中一定要注意的點：processData的屬性要設定為false，這個是html5的屬性，如果沒有設定為false的話，這個地方會出問題。主要是檔案的內容不希望轉換成字串。具體可查看jquery ajax的參數解釋：http://www.w3school.com.cn/jquery/ajax_ajax.asp

對於FormData對象，你可以先建立一個空的FormData對象,然後使用append()方法向該對象裡添加欄位(引用別的網站的描述)
比如：

 

  
var oMyForm = new FormData();
 
  


  
oMyForm.append("username", "Groucho");

  
oMyForm.append("accountnum", 123456); // 數字123456被立即轉換成字串"123456"

  


  
// fileInputElement中已經包含了使用者所選擇的檔案

  
oMyForm.append("userfile", fileInputElement.files[0]);

  


  
var oFileBody = "<a id="a"><b id="b">hey!"; // Blob對象包含的檔案內容

  
var oBlob = new Blob([oFileBody], { type: "text/xml"});

  


  
oMyForm.append("webmasterfile", oBlob);

  


  
var oReq = new XMLHttpRequest();

  
oReq.open("POST", "http://foo.com/submitform.php");

  
oReq.send(oMyForm); 
 

這部分內容需要查看FormData對象的具體內容，可查看該網址：http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html

node.js後台代碼如下：

 

  
router.post('/photo/new',function(req,res,next){
 
  
let form = new formidable.IncomingForm(); //建立上傳表單

  
form.uploadDir = UPLOAD_PATH;

  
form.keepExtensions = true; //保留尾碼

  
form.maxFieldsSize = 4*1024*1024; //檔案大小

  
form.parse(req,function(err,fields,files){

  
if(err){

  
res.send("插入標籤失敗");

  
return;

  
}

  
let extName = '';

  
let urls = [];

  
for(var key in files){

  
let file = files[key];

  
switch(file.type){

  
case 'image/pjpeg':

  
extName = 'jpg';

  
break;

  
case 'image/jpeg':

  
extName = 'jpg';

  
break;

  
case 'image/png':

  
extName = 'png';

  
case 'image/x-png':

  
extName = 'png';

  
break;

  
}

  
if(extName.length === 0){

  
res.send("只支援png和jpg格式的圖片檔案");

  
return;

  
}

  
let saveName = uuid.v1()+'.'+extName;

  
let savePath = form.uploadDir+saveName;

  
urls.push(PHOTO_URL+saveName);

  
fs.renameSync(file.path,savePath);

  
}

  
res.send(urls[0]);

  
})

  
}) 
 

使用formidable庫輔助實現

其實裡面最重要的還是FormData的使用，用html5實現這部分的非同步上傳還是比較方便的