使用Bootstrap Fileinput 完成圖片的上傳

主要是參考這個文章：http://blog.csdn.net/qq_23254453/article/details/51199153

要點：

0、使用的是官方中提示的bower安裝方法，然后引用

<link rel="stylesheet" type="text/css" href="/bootstrap-fileinput/css/fileinput.min.css"/>

<script type="text/javascript" src="/bootstrap-fileinput/js/fileinput.min.js"></script>

1、<input>控件中的name屬性非常重要，就是后台controller中的文件流參數

2、<input>控件的初始化：

function initFileInput($ctrlId) {
    $ctrlId.fileinput({
        uploadUrl: 'http://115.159.211.47:9090/question/ajax/img/uploade', //上傳的地址
        allowedFileExtensions: ['jpg', 'png', 'gif'],//接收的文件后綴
        showUpload: false, //是否顯示上傳按鈕
        browseClass: "btn btn-primary", //按鈕樣式
        uploadExtraData: function (previewId, index) {   //額外參數的關鍵點
            var obj = {};
            obj.extra = getHideInput();
            return obj;
        }
    });
}

function getHideInput() {
    return $('#J_hidden＿input').val();
}

其中方法的入參就是<input>的ID($"#J_XXX")，需要注意的是，如果使用上面的JS動態初始化的方法，input中不要有class屬性，因為會重復初始化

3、初始化中的uploadeUrl就是后台controller

4、由於是Nodejs前端直接post上面的那個URL到后台，因此這必定存在瀏覽器的跨域調用問題，參考這個就好了，之前已經說明過這個問了，不再解釋底層代碼了

http://blog.csdn.net/u013218587/article/details/54646203

 

工程文件就是全國計算等級考試網站的后台系統