本文采用boostrap、、jquery、jade（html的一種模板）、nodejs實現

最終實現的效果：一個按鈕在選擇完檔案後，自動上傳到後臺；

-改變input樣式

在form表單中，用<a>包裹<input type="file">，讓input隱藏，jade程式碼如下

form#index_new.form-horizontal(method="post",role="form",action="/admin/index/save",enctype="multipart/form-data")
  input(type="hidden",name="index[_id]",value="#{index._id}")
    .col-sm-2
      a.btn.btn-primary.upload_index_img_box 新增圖片
        input(type="hidden",name="posterType",value="index")
        input#upload_index_img(type="file",name="upload_poster") 
 

第二個input(type="hidden")的作用是用來提交圖片型別到後臺，也就是posterType='index'這個值，作為識別符號，以方便檔案的分類管理

利用”事件捕獲“和”事件冒泡“，給外層a繫結點選事件來觸發內層的input(type="file")以選擇檔案，原始碼如下

	var btnChooseFile = $('.upload_index_img_box');
	var btnChooseHide = $('#upload_index_img');
	btnChooseFile.click(function(event){
		event.stopPropagation();
		console.log(event.target);
		console.log(this);
		if (event.target==this) {
			btnChooseHide.click();
			
		}
	});
 

為內層隱藏的input(type="file")設定.change()監聽，上傳結束時，觸發ajax，向伺服器端傳送資料：

btnChooseHide.change(function(event){
		if (btnChooseHide.val()!=='undefined') {
			//html5的生成的表單資料物件
			var form = new FormData($('#index_new')[0]);
        	$.ajax({
        	        url: '/admin/index/save',
        	        type: 'post',
        	        //傳送到伺服器端的資料的格式，取消預設編碼格式
        	        contentType:false,
        	        dataType:'json',
        	        data: form,
        	        //因為是圖片，不要對其作序列化處理
        	        processData:false,
        	        success: function (data) {
        	        	if (data){
        	        	//對伺服器返還的資料進行拼接處理
        	        		var id = data.index._id;
        	        		var img = data.index.img;
        	        		var date = data.index.meta.updateAt.split('T')[0];
        	        		var html = $('<tr class="item-id-'+id+'"></tr>')
        	        		var tdName = $('<td><a class="thumbnail"><img src="/upload/index/'+img+'" alt="點選檢視大圖"/></a></td>');
        	        		var tdDate = $('<td>'+date+'</td>');
        	        		var del = $('<td><button class="btn btn-danger del" type="button" data-id="'+id+'" data-type="index">刪除</button></td>')
        	        		html.appendTo(tbody);
        	        		tdName.appendTo(html);
        	        		tdDate.appendTo(html);
        	        		del.appendTo(html);
                    	}
                	},
                	err:function(jqHXR){
						console.log(jqXHR.status);
                	}
            });
        return false;
		}
	});
 

這其中contentType不能設定為multipart/form-data，否則會報錯。關鍵的三點是contentType、dataProcess、new FormData()，否則檔案無法傳到後臺。

伺服器端實現：

根據傳過來的資料，進行一系列處理後，以初始路徑地方式讀取傳過來的檔案，再生成新的指定路徑和新的檔名稱，將檔案寫入到該路徑下。完成檔案的儲存後，將資料傳給前端，前端以jquery的方式對資料進行拼接插入，從而實現非同步更新。

此外，資料還要對模板進行渲染，否則重新整理頁面後無法顯示。

處理圖片上傳的中介軟體如下：

var fs = require('fs');
var path = require('path');
exports.save_poster = function(req,res,next){
	console.log('req.files');
	console.log(req.files);
	var posterData = req.files.upload_poster;
	var posterType = req.body.posterType;
	var filePath = posterData.path;
	var originalFilename = posterData.originalFilename;
	if (originalFilename) {
		fs.readFile(filePath,function(err,data){
			//生成日期
			var timestamp = Date.now();
			//獲取圖片格式
			var type = posterData.type.split('/')[1];
			//由“日期.圖片格式”生成檔名
			var posterName = timestamp+'.'+type;
			//__dirname獲取當前資料夾（只是資料夾，不包括檔案本身）的絕對路徑
			//合併下面的路徑生成圖片檔案的儲存路徑
			var newPath = path.join(__dirname,'../../','/public/upload/'+posterType+'/'+posterName);
			fs.writeFile(newPath,data,function(err){
				req.poster = posterName;
				next();
			});
		});
	}
	else{
		next();
	}
};