First, the renderings:
This is the code I made for more pictures at that time. I will take it out for you to learn from (some places need to be modified by your own personal information, and the general direction is correct)
There are three documents involved in total (regularly speaking)
1.Route entry file (I am /routes.js here, and it is often in /app.js)
The code copy is as follows:
//Add delicious food
app.all('/add', users.add);
2.Routing controller file (I am /routes/users.js here)
The code copy is as follows:
//Add delicious food
exports.add = function (req, res) {
if (req.method == "GET") {
var user = {};
if(req.session.user){
user = req.session.user;
}
res.render("users/food_add", {title:'Release food-'+config.name,name:config.name,user:user});
} else if (req.method == "POST") {
//Get data
var x = req.body.x;
var y = req.body.y;
var cat_id = req.body.cat_id;
var cat_name = req.body.cat_name;
var address = req.body.address;
var title = req.body.title;
var desc = req.body.desc;
var content = req.body.content;
var pics = '';
var price = req.body.price;
var tags = req.body.tags;
var add_time = Date.parse(new Date())/1000;
var support = 0;
var uid = req.body.uid;
//Processing image upload
//console.dir(req.files);
var file_obj = req.files.pics;
//console.log(file_obj.length);
var file_obj2 = [];
for(var i=0;i<file_obj.length;i++){
if(file_obj[i].name){
file_obj2.push(file_obj[i]);
}
}
var length = file_obj2.length;
if(length>0){
file_obj2.forEach(function(item,index){
if(item.path){
var tmpPath = item.path;
var type = item.type;
var extension_name = "";
//Move to the specified directory and usually put it under the public images file
// Make sure the path already exists when moving, otherwise an error will be reported
var tmp_name = (Date.parse(new Date())/1000);
tmp_name = tmp_name+''+(Math.round(Math.random()*9999));
//Judge file type
switch (type) {
case 'image/pjpeg':extension_name = 'jpg';
break;
case 'image/jpeg':extension_name = 'jpg';
break;
case 'image/gif':extension_name = 'gif';
break;
case 'image/png':extension_name = 'png';
break;
case 'image/x-png':extension_name = 'png';
break;
case 'image/bmp':extension_name = 'bmp';
break;
}
var tmp_name = tmp_name+'.'+extension_name;
var targetPath = 'public/images/' + tmp_name;
console.log(tmpPath);
//Move the uploaded temporary file to the specified directory
fs.rename(tmpPath, targetPath, function(err) {
if(err){
throw err;
}
if(pics){
pics += ','+tmp_name;
}else{
pics += tmp_name;
}
//Judge whether it is completed
//console.log(index);
//Delete temporary files
fs.unlink(tmpPath, function(){
if(err) {
throw err;
}else{
if((index+1)==length){
console.log(targetPath);
//Upload processing is completed
//data
var data = {
x:x,//Longitude
y:y,//Dimension
cat_id:cat_id,//Category id
cat_name:cat_name,//Category name
address:address,//address
title:title,//Title
desc:desc,//Introduction
content:content,//Content
pics:pics,//Picture field, separate multiple pictures with ','
price:price,//price
tags:tags,//Tags are separated by ','
add_time:add_time,//Support
support:support,//The default support is 0
uid:uid//User ID can be anonymous
};
food_preDao.insert(data, function (err, food) {
if(err){
res.json({err:100,content:'Database Error'});
}else{
res.json({err:0,content:'Release successful!',data:food});
}
});
}
}
});
});
}
});
}else{
//No pictures
//data
var data = {
x:x,//Longitude
y:y,//Dimension
cat_id:cat_id,//Category id
cat_name:cat_name,//Category name
address:address,//address
title:title,//Title
desc:desc,//Introduction
content:content,//Content
pics:pics,//Picture field, separate multiple pictures with ','
price:price,//price
tags:tags,//Tags are separated by ','
add_time:add_time,//Support
support:support,//The default support is 0
uid:uid//User ID can be anonymous
};
food_preDao.insert(data, function (err, food) {
if(err){
res.json({err:100,content:'Database Error'});
}else{
res.json({err:0,content:'Release successful!',data:food});
}
});
}
}
};
3. View file (I am /views/users/food_add.ejs here)
The code copy is as follows:
<style>
.upload_item{ width: 50px; height: 45px; overflow: hidden;border: 2px dashed #bfbfbf; float: left;margin-right: 10px;}
.upload_item_add{ width: 50px; height: 45px; display: block; line-height: 42px; text-align: center; font-size: 30px; cursor: pointer;}
.upload_input{ }
</style>
<script>
var ADD = {
upload_click:function(obj){
$(obj).parent().children().eq(1).click();
},
upload_change:function(obj){
var path;
path=$(obj).val(); //C:/Documents and Settings/hud/Desktop/AddFile.jpg
var aa;
aa=path.split('.');
//alert(aa[aa.length-1]); //jpg Result
var name;
name=path.split('//');
var bb=name[name.length-1];
//alert(bb.substr(0,bb.indexOf('.'))); //AddFile result
$(obj).parent().children().eq(0).css('fontSize','12px');
$(obj).parent().css('borderStyle','solid');
$(obj).parent().children().eq(0).html(bb.substr(0,bb.indexOf('.')));
if($(obj).parent().attr('index')==1){//Add new
var html = '<div index="1"><span onclick="ADD.upload_click(this)">+</span><input type="file" name="pics" id="pics" onchange="ADD.upload_change(this)" /></div>';
$('#upload_box').append(html);
$(obj).parent().attr('index','0');
}
}
};
</script>
<form method="post" action="/add" enctype="multipart/form-data">
<table>
<tr>
<td>Longitude:</td><td><input type="text" name="x" id="x" /></td>
</tr>
<tr>
<td>Dimension: </td><td><input type="text" name="y" id="y" /></td>
</tr>
<tr>
<td>Category:</td><td><select name="cat_id"><option value="1">Category 1</option></select></td>
</tr>
<tr>
<td>Address: </td><td><input type="text" name="address" id="address" /></td>
</tr>
<tr>
<td>Title: </td><td><input type="text" name="title" id="title" /></td>
</tr>
<tr>
<td>Introduction: </td><td><input type="text" name="desc" id="desc" /></td>
</tr>
<tr>
<td>Content:</td><td><input type="text" name="content" id="content" /></td>
</tr>
<tr>
<td>Picture: </td><td id="upload_box"><div index="0" style="display:none;"><span onclick="ADD.upload_click(this)">+</span><input type="file" name="pics" id="pics" onchange="ADD.upload_change(this)" /></div><div index="1"><span onclick="ADD.upload_click(this)">+</span><input type="file" name="pics" id="pics" onchange="ADD.upload_change(this)" /></div></td>
</tr>
<tr>
<td>Price:</td><td><input type="text" name="price" id="price" /></td>
</tr>
<tr>
<td>Tags: </td><td><input type="text" name="tags" id="tags" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="submit" /></td>
</tr>
</table>
</form>