bootstrap-fileInput

刚接触H5不久，喜欢bootstrap的风格，因此想用它来完成或积累这几年所学的点点滴滴；



这些天做文件上传控件，使用的是bootstrap fileInput，网上大多数问题是回调函数的使用，我也参考了网上的例子，大概记录一下用jquery的on函数来做回调的步骤

html：

<input id="uploadFile" class="file" type="file" name="myFiles" multiple="true" >

js:

//初始化上传控件的样式
$("#uploadFile").fileinput({
language: 'zh', //设置语言
uploadUrl: '/uploadFile/uploadFile.do', //上传的地址
showUpload: true, //是否显示上传按钮
showCaption: true,//是否显示标题
overwriteInitial: false,
maxFileSize: 1000,//单位为kb，如果为0表示不限制文件
//uploadAsync:true,//异步上传
//maxFileCount:,//控制异步上传数量
//browseClass: "btn btn-primary", //按钮样式
//uploadExtraData:{id:'kv-1'}, //可传入参数
slugCallback: function(filename) {
return filename.replace('(', '_').replace(']', '_');
}
});

回调JS：

$("#uploadFile").on("fileuploaded", function (event, data, previewId, index) {
alert(data.response[1].filePath);
});

java简单描述：

public void uploadFile(@RequestParam(value = "myFile", required = false) MultipartFile myFile, HttpServletRequest request, ModelMap model)throws SmallException{
//上传代码省略...
try {
outPutString("[{\"success\":\"完成\"},{\"filePath\":\"XX\"}]");
} catch (IOException e) {
e.printStackTrace();
}
}

其中写出的参数，错误文件上传有使用的error:”错误信息”；正确文件则使用success:”完成”;再加入路径等等参数来做一个回显文件的功能.

有问题的地方还望指针，感谢~