Chinaunix首页 | 论坛 | 博客
  • 博客访问: 250205
  • 博文数量: 34
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 961
  • 用 户 组: 普通用户
  • 注册时间: 2013-07-11 17:19
个人简介

没有最好的语言,只有最适合的语言。

文章分类

全部博文(34)

文章存档

2016年(2)

2013年(32)

我的朋友

分类: JavaScript

2016-03-27 22:13:42

    这个阶段,利用晚上剩余的时间用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的参数解释:对于FormData对象,你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段(引用别的网站的描述)
比如:

点击(此处)折叠或打开

  1. var oMyForm = new FormData();
  2.  
  3. oMyForm.append("username", "Groucho");
  4. oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"
  5.  
  6. // fileInputElement中已经包含了用户所选择的文件
  7. oMyForm.append("userfile", fileInputElement.files[0]);
  8.  
  9. var oFileBody = "">">hey!"; // Blob对象包含的文件内容
  10. var oBlob = new Blob([oFileBody], { type: "text/xml"});
  11.  
  12. oMyForm.append("webmasterfile", oBlob);
  13.  
  14. var oReq = new XMLHttpRequest();
  15. oReq.open("POST", "");
  16. 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实现这部分的异步上传还是比较方便的
阅读(24026) | 评论(1) | 转发(0) |
0

上一篇:三层交换机命令行使用总结

下一篇:没有了

给主人留下些什么吧!~~

shuangbaby1232016-06-02 15:43:49

OneAPM Browser Insight是一个基于真实用户的 Web 前端性能监控平台,可以定位网站性能瓶颈,网站加速效果可视化;支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。可以在官网注册体验哦~