程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> JAVA編程 >> JAVA綜合教程 >> node.js 通過ajax上傳圖片

node.js 通過ajax上傳圖片

編輯:JAVA綜合教程

node.js 通過ajax上傳圖片


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

html代碼(jade):

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

ajax代碼(javascript):

  1. //判斷圖片的格式是否是png/ipg的格式
  2. function judgePhotoExt(name){
  3. if(name.length === 0){
  4. $("#upfiletip").css("color","red");
  5. $("#upfiletip").text = "你沒有選擇任何圖片!!!"
  6. return false;
  7. }
  8. var extName = name.substring(name.lastIndexOf('.'),name.length).toLowerCase();
  9. if(extName != '.png' && extName != '.ipg'){
  10. $("#upfiletip").css("color","red");
  11. $("#upfiletip").text = "只支持png和ipg格式的格式的文件!!!"
  12. return false;
  13. }
  14. return true;
  15. }

  16. //上傳圖片文件
  17. function upFile(){
  18. var filename = $("#inputfile").val();
  19. if(judgePhotoExt(filename)){
  20. var data = new FormData();
  21.     var files = $("#inputfile")[0].files;
  22. if(files){
  23.       data.append("file", files[0]);
  24. }
  25. $.ajax({
  26. url: '/blog/photo/new',
  27. type: 'POST',
  28. data: data,
  29. async: false,
  30. cache: false,
  31. contentType: false,
  32. processData: false,
  33. success: function(data){
  34. var text = $("#content-textarea").val();
  35. text = text+"![圖片提示]("+data+")";
  36. $("#content-textarea").val(text);
  37. $('#imageModal').modal('hide');
  38. },
  39. error: function(err){
  40. console.log(err);
  41. }
  42. })
  43. }
  44. }
注意:其中一定要注意的點:processData的屬性要設置為false,這個是html5的屬性,如果沒有設置為false的話,這個地方會出問題。主要是文件的內容不希望轉換成字符串。具體可查看jquery ajax的參數解釋:http://www.w3school.com.cn/jquery/ajax_ajax.asp

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

  1. var oMyForm = new FormData();

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

  4. // fileInputElement中已經包含了用戶所選擇的文件
  5. oMyForm.append("userfile", fileInputElement.files[0]);

  6. var oFileBody = "<a id="a"><b id="b">hey!"; // Blob對象包含的文件內容
  7. var oBlob = new Blob([oFileBody], { type: "text/xml"});

  8. oMyForm.append("webmasterfile", oBlob);

  9. var oReq = new XMLHttpRequest();
  10. oReq.open("POST", "http://foo.com/submitform.php");
  11. oReq.send(oMyForm);
這部分內容需要查看FormData對象的具體內容,可查看該網址:http://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html

node.js後台代碼如下:

  1. router.post('/photo/new',function(req,res,next){
  2. let form = new formidable.IncomingForm(); //創建上傳表單
  3. form.uploadDir = UPLOAD_PATH;
  4. form.keepExtensions = true; //保留後綴
  5. form.maxFieldsSize = 4*1024*1024; //文件大小
  6. form.parse(req,function(err,fields,files){
  7. if(err){
  8. res.send("插入標簽失敗");
  9. return;
  10. }
  11. let extName = '';
  12. let urls = [];
  13. for(var key in files){
  14. let file = files[key];
  15. switch(file.type){
  16. case 'image/pjpeg':
  17. extName = 'jpg';
  18. break;
  19. case 'image/jpeg':
  20. extName = 'jpg';
  21. break;
  22. case 'image/png':
  23. extName = 'png';
  24. case 'image/x-png':
  25. extName = 'png';
  26. break;
  27. }
  28. if(extName.length === 0){
  29. res.send("只支持png和jpg格式的圖片文件");
  30. return;
  31. }
  32. let saveName = uuid.v1()+'.'+extName;
  33. let savePath = form.uploadDir+saveName;
  34. urls.push(PHOTO_URL+saveName);
  35. fs.renameSync(file.path,savePath);
  36. }
  37. res.send(urls[0]);
  38. })
  39. })

使用formidable庫輔助實現

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

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved