在公益给学校写跳蚤市场网站时遇到一个问题,node.js如何将前端ajax过来的图片存到本地,结合度娘搞了好久终于有一个简单易用的办法,下面我直接贴源代码:
前端代码【html】
<center>
<form name='form1' id='form1'>
<!-- 发布者姓名 -->
<span class='lead'>您的姓名:
<input type="text" id='user_name' name='user_name'>
<hr/>
<!-- 图片上传 -->
<span class='lead muted'>物品图片:
<input type='file' id='user_picture' name='user_picture'>
<hr/>
<!-- 物品名称 -->
<span class='lead text-info'>物品名称:
<input type="text"id='user_goods' name='user_goods'>
<hr/>
<!-- 物品类别 -->
<span class='lead text-warning'>物品类别:
<select id='user_class' name='user_class'>
<option>电子产品</option>
<option>书籍</option>
<option>文体用品</option>
<option>电脑装备</option>
<option>关乎游戏</option>
<option>其他</option>
</select>
<hr/>
<!-- 物品描述述 -->
<span class='lead text-success'>物品描述:
<textarea row='3'id='user_intro' name='user_intro'></textarea>
<hr/>
<!-- 出售理由 -->
<span class='lead muted'>出售理由:
<textarea row='3' id='user_reason' name='user_reason'></textarea>
<hr/>
<!-- 联系电话 -->
<span class='lead text-error'>联系电话:
<input type='text'id='user_tel' name='user_tel'>
<hr/>
<!-- 物品价格 -->
<span class='lead muted'>物品价格:
<div class='input-append'>
<input class='span2' type='text' id='user_price' name='user_price'>
<span class='add-on'>¥</span>
</div>
<hr/>
<!-- 提交按钮 -->
<button class='btn btn-block btn-large btn-warning'>重置</button>
<button class='btn btn-block btn-large btn-primary' id='submit' onclick="fsubmit()">提交</button>
</form>
前端代码【js】
function fsubmit(){
var data = new FormData($('#form1')[0]);
$.ajax({
url: '/user_goods',
type: 'POST',
data: data,
dataType: 'JSON',
cache: false,
processData: false,
contentType: false,
success:function(data){
alert(data);
},
error:function(data){
alert(JSON.stringify(data));
}
});
后端代码【node.js】
var formidable = require('formidable');
var fs = require('fs');
//这个模块是我将数据插入数据库的,可以不用理会
var form_info_to_db = require('./form_info_to_db.js');
module.exports.form_process=function(req, res){
var form = new formidable.IncomingForm(); //创建上传表单
form.encoding = 'utf-8'; //设置编辑
form.uploadDir = 'mazheFile/' +'user_photo/'; //设置上传目录
form.keepExtensions = true; //保留后缀
form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
form.parse(req, function(err, fields, files) {
if (err) {
res.send('失败');
}
var extName = ''; //后缀名
switch (files.user_picture.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;
}
//没有图片直接return
if(extName.length == 0){
return;
}
var avatarName = Math.random() + '.' + extName;
var newPath = 'user_photo/' + avatarName;
var emitter = new events.EventEmitter();
emitter.on('event2',function(){
fs.renameSync(files.user_picture.path, form.uploadDir+avatarName);
res.send('录入成功');
});
//将数据插入到数据库中
form_info_to_db.form_info_to_db(fields, newPath);
fs.renameSync(files.user_picture.path, form.uploadDir+avatarName);
});
}
*下面链接是为了测试web聊天室的demo,大家可以体验一下node的即时通讯:
*http://115.28.200.138:3000/