使用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

 

工程文件就是全国计算等级考试网站的后台系统