实现图片上传并显示到浏览器功能

本文介绍的是使用node.js实现图片的上传并及时显示到浏览器的功能，希望可以帮得到大家，后台不用node.js，用其他的也行，思路是一样的。

首先介绍一下思路，然后再上代码

一、思路：

    大家都知道，,这个在浏览器显示的非常丑，所以我们可以通过点击其他的元素来触发的点击事件，实现漂亮的文件上传，当你选择好文件后，会触发,的change事件，在该事件中利用jquery插件jquery-form.js的ajaxSubmit函数来实现表单的异步提交，那就会有人问了，为什么并不直接用jquery的ajax函数异步提交呢，这个问的好，因为ajax不好传输文件数据，我在后台一直不能正确的获得使用ajax传递过来的数据。

   当前端可以正确的发送数据给后台之后，那么后台就要获取数据了，我使用的是node.js的formidable中间件，如果使用的是Java做后台的话，也有Java的一套获取文件数据的api。

二、代码：

upload.ejs

 
 
 
     //jquery-1.12.2.js这样的文件在当前文件所在目录的test目录下,静态文件有一个专门的存放目录
 
 
 
       
  
 

   
 

 

   
 

 

fileUpload.js

var express=require("express");
var bodyParser=require("body-parser");
var formidable=require("formidable");
var util=require("util");
var fs=require("fs");


var app=express();
app.set("views",__dirname);
app.set("view engine","ejs")  //设置模版引擎是ejs
app.use(bodyParser.urlencoded({extended:false}));  //body-parser可以用来解析form提交过来的数据,和contentType=application/x-www-form-urlencoded类型的数据
app.use(bodyParser.json());    //用来解析ajax的contentType="application/json"类型的数据
app.use(express.static(__dirname+"/test"));   //设置静态文件的存放路径，前面upload.ejs中的很多静态文件都在个目录
app.get("/upload",function(req,res){
    res.render("upload");
});
app.post("/upload",function(req,res){
    var form=new formidable.IncomingForm();    
    form.uploadDir=__dirname+"/test";      //设置客户端上传来的文件的存放路径
    form.keepExtensions=true;                     //是否保留文件的后缀
    form.parse(req,function(err,fields,files){  //form.parse是解析文件函数，当它执行完成，文件就已经存在form.
    console.log(util.inspect(files));     //files存储着上传过来的文件对象信息
    console.log(util.inspect(fields));  //fields是除file之外的其他的表单数据，
        var newName=files.imgFile.path.replace(files.imgFile.path.substr(files.imgFile.path.lastIndexOf("\\")+1),files.imgFile.name);

        //file.imgFile.path表示上传文件在服务器的存放路径，包括文件名，files.imgFile.name是文件的真实名称
        console.log(newName);
        fs.rename(files.imgFile.path,newName,function(){   //重命名上传来的文件
            res.write({src:files.imgFile.name});   //返回刚刚上传文件的文件名，当ajaxSubmit获取到后，这个文件名会被设置成一个img的src，从而加载这张图片
        });
   
    });
});
app.listen(1337,"127.0.0.1",function(){
console.log("server is listenning on 127.0.0.1:1337");
});