您的位置:首页 > Web前端 > JavaScript

express(jade或ejs)如何实现上传图片到服务器并在客户端展示(在客户端可以删除)

2013-01-04 21:32 816 查看
详细代码见:https://github.com/marujun/imageUpload

使用ejs编写不使用jade查看上面链接GitHub

关键点:




如果express的版本低于3.0的时候使用下面的语句:




效果图:










首先需要创建一个express项目:然后在app.js中添加几个接口模块:

app.get('/', routes.index);//主页面
app.get('/upload',routes.upload);//上传图片页面
app.get('/show/:imaNames',routes.show);//传送图片接口
app.get('/getImageNameJson',routes.getImageNameJson);//传送服务器图片存储json
app.post('/upload/image',routes.postFile);//上传图片接口
app.get("/delete/:id",routes.delete);//删除图片接口
app.get("/javaScriptCss/:file",routes.javaScriptCss);//css和javascript文件接口

在index.js文件中添加模块接口具体代码:

var querystring = require("querystring"),
fs = require("fs"),
formidable = require("formidable");
exports.index = function(req, res){
fs.readdir("./public/images/", function (err, files) {
var count = files.length;
res.render('index',{num:count});
res.end();
});
};

exports.javaScriptCss=function(req,res){
switch(req.params.file)
{
case 'function.js':
fs.readFile('./public/javascripts/function.js',function (err, data) {
if (err) throw err;
res.send(data);
res.end();
});
break;
case 'jquery-1.7.2.js':
fs.readFile('./public/javascripts/jquery-1.7.2.js',function (err, data) {
if (err) throw err;
res.send(data);
res.end();
});
break;
case 'style.css':
fs.readFile('./public/stylesheets/style.css',function (err, data) {
if (err) throw err;
res.send(data);
res.end();
});
break;
case 'uploadStyle.css':
fs.readFile('./public/stylesheets/uploadStyle.css',function (err, data) {
if (err) throw err;
res.send(data);
res.end();
});
}
};

exports.upload=function(req,res){
res.render('file-upload');
res.end();
};

exports.postFile=function(req, res, next) {//用户上传图片
fs.readdir("./public/images/", function (err, files) {
var count = files.length+1;
if(req.files.addImage.size==0)//判断用户上传的内容是否为空
{
res.redirect('http://localhost:3000/upload');
//            res.send("<br>"+"<br>"+"<br>"+"请选择需要上传的文件!!!");
}
else{
var tmp_path = req.files.addImage.path; // 获得文件的临时路径
var target_path = './public/images/' +req.files.addImage.name;// 指定文件上传后的目录
fs.rename(tmp_path, target_path, function(err) { // 移动文件
if (err) throw err;
fs.unlink(tmp_path, function() {// 删除临时文件夹文件,
if (err) throw err;
res.redirect('http://localhost:3000');
res.end();
});
});}
});
};

exports.getImageNameJson=function(req,res){ //向客户端传送服务器图片信息
fs.readdir("./public/images/", function (err, files) {//读取文件夹下文件
var count = files.length,
results =new Array() ;
files.forEach(function (filename) {
fs.readFile(filename, function (data) {
var tmpResult={};
tmpResult["imageName"]=filename;
tmpResult["imagePath"] = "./public/images/"+filename;
results[count-1]=tmpResult ;
count--;
if (count <= 0) {
console.log(results);
res.send(results);
res.end();//向客户端传送服务器图片信息(json数据格式)
}
});
});
});
};

exports.show=function(req,res){
var ima=req.params.imaNames;
fs.readFile("./public/images/"+ima, "binary", function(error, file) {
if(error) {
res.writeHead(500, {"Content-Type": "text/plain"});
res.write(error + "\n"); res.end();
}
else
{
res.writeHead(200, {"Content-Type": "image/png"});
res.write(file, "binary"); res.end();
}
});
};
exports.delete=function(req,res){//删除图片
var fileName=req.params.id;
fs.unlink("./public/images/"+fileName);
res.redirect('http://localhost:3000');
};


创建index.jade文件用于主页面布局:

html
head
meta(http-equiv='Content-Type', content='text/html', charset='UTF-8')
link(rel='stylesheet', href='/javaScriptCss/style.css')
script(type='text/javascript',src='/javaScriptCss/function.js')
script(type='text/javascript',src='/javaScriptCss/jquery-1.7.2.js')
body(onload='CreateImg(#{num})')
div(id='divButton')
input(type='button',value='上传图片',onclick='redirect()',id='pageRedirect')
div(id='divImage')

创建file-upload.jade文件用于上传页面布局:

html
head
meta(http-equiv='Content-Type', content='text/html', charset='UTF-8')
link(rel='stylesheet', href='/javaScriptCss/uploadStyle.css')
script(type='text/javascript',src='/javaScriptCss/function.js')
body
div(class='file-box')
form(action='/upload/image', enctype='multipart/form-data' ,method='post')
p 请选择需要上传的图片:
input(type='text', name='textfield' ,id='textfield', class='txt' )
input(type='button' ,class='btn', value='浏览...' )
input(type='file' ,name='addImage', class='file' ,id='fileField', size='28' ,onchange="document.getElementById('textfield').value=this.value")
input(type='submit' ,name='submit' ,class='btn', value='上传',onclick='check()' )


用到的javascript代码:
function.js

function CreateImg(x)
{
var imageNameJson;
$.getJSON("/getImageNameJson", function(json){//从服务器端获取json数据
imageNameJson=json;
//        alert(imageNameJson[0].imagePath);
for(var i=0;i<x;i++)
{
var k=1;
if(i%2==1)
{ k=2; }
//生成IMG
var strImage =  document.createElement("img");
//            strImage.id=imageNameJson[i].imageName;
strImage.style.width="512px";
strImage.style.height="384px";
strImage.style.float="left";
strImage.src="/show/"+imageNameJson[i].imageName;
strImage.style.zIndex=1;
//生成BUTTON
var strButton =  document.createElement("input");
var ID=strButton.id=imageNameJson[i].imageName;
strButton.type="button";
strButton.value="X";
strButton.style.zIndex=3;
strButton.style.position="absolute";
if(k==1)
{strButton.style.left="489px";}
else{strButton.style.left="1011px";}
strButton.style.marginTop="0px";
strButton.style.backgroundColor="transparent";
strButton.onclick=new Function("location.href ='/delete/"+ID+"'");
//生成DIV
var strDiv =  document.createElement("div");
strDiv.style.width="522px";
strDiv.style.height="394px";
strDiv.style.float="left";
//应用
var imageDiv=document.getElementById("divImage");
imageDiv.a(strDiv);
strDiv.a(strImage);
strDiv.a(strButton);
}
});
}
function deleteImage(x)
{
window.location= "http://localhost:3000/delete/"+x;
}
function redirect()
{
window.location= "http://localhost:3000/upload";
}
function check()
{
var obj=document.getElementById("fileField");
var fso=new ActiveXObject("Scripting.FileSystemObject");
var image=fso.GetFile(obj.value);
if(image.size==0)
{
alert("请选择需要上传的图片!");
}
}


jquery-1.7.2.js链接:http://code.jquery.com/jquery-1.7.2.js

style.css代码:用于主页面布局:

#pageRedirect{
position: absolute;
color: red;
font-size: x-large;
background-color:transparent;
left: 900px;
}
#divbutton{
margin: 0 auto;
width: 1024px;
overflow: hidden;
height: 40px;
position: relative;
z-index:2;
top:0;
}
#divImage{
margin: 0 auto;
overflow: hidden;
width: 1044px;
position: relative;
}

uploadStyle.css用于上传页面的布局:

body{
font-size:20px;
}
input{
vertical-align:middle;
margin:0;
padding:0
}
p{
height:25px;
}
.file-box{
position:relative;
width:340px
}
.txt{
height:24px;
border:1px solid #cdcdcd;
width:180px;
left:20px;

}
.btn{
background-color:#FFF;
border:1px solid #CDCDCD;
height:24px;
width:70px;
font-size: 18px;
margin-left: 5px;
}
.file{
position:absolute;
left: 185px;
height:24px;
opacity:0;
width:70px;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐