首先声明几点：
1.这篇文章必须写，网上各种网友提供了很多关于此插件的用法可以说很详细，但是，注意但是，很多都是简单使用，至于如何加密传参、插件清空、样式改变等都没有。。。所以核心的东西只能自己研究了。。。
2.Http请求GET、POST。。。各种跨域的自行百度(get不支持文件上传，但是可以配合后台直接跨域)此插件用的是POST可看源码
3.修改部分插件，上面提到的问题都会有解决
正文开始：
首先引入基础插件和汉化，注意这里我是用angular5开发的页面所以是基于webpack打包的，不用框架的童鞋直接引用就OK了但是注意一点zh.js(汉化)一定得在fileinput.js后引用(不要问我为啥，都是泪)
angular-cli.json文件：
...
scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../src/fileupload/fileinput.min.js",
"../src/fileupload/zh.js"
]
...
html页面:
<form id="IMGForm" method="post" enctype="multipart/form-data">
<input id="fileupload" type="file" multiple data-overwrite-initial="false" data-min-file-count="1">
</form>
TS代码:
清除插件选择的文件,这个很蛋疼，作者并没有明确提供用代码清除选择文件的方法，只能在页面上手动清除，用户上传成功之后还得手动清除，体验很不好，所以看源码研究一下，如此解决
里面有一个需要和后台对应上的文件协商名,后台List<MultipartFile> files = ((MultipartHttpServletRequest) request).getFiles("FileUpload")
在fileinput.js中查找('file_data')替换为"FileUpload"就OK
感兴趣的童鞋可以看看这个插件的中文文档(当然官网最好http://plugins.krajee.com/file-input)
https://blog.csdn.net/u012526194/article/details/69937741
//里面有一个需要和后台对应上的文件协商名,后台List<MultipartFile> files = ((MultipartHttpServletRequest) request).getFiles("FileUpload")
在fileinput.js中查找('file_data')替换为"FileUpload"就OK
//清除插件选择的文件,这个很蛋疼，作者并没有明确提供用代码清除选择文件的方法，只能在页面上手动清除，用户上传成功之后还得手动清除，体验很不好，所以看源码研究一下，如此解决
clearFileInput(){
$('#fileupload').fileinput('clear')
}
URL:string="http://xxx/upload.do"
LOCK:boolean=false;//请求锁 下面会用到
ngOnInit() {//初始化,相当于jquery的 $(document).ready(function () {}
let that=this;//this外引
$("#fileupload").fileinput({
language:'zh',//指明插件汉化
uploadUrl: that.URL,//后台地址
allowedFileExtensions: ['jpg', 'png', 'gif'],//允许上传文件的类型
overwriteInitial: false,//设置是否覆盖原有的已上传项
maxFileSize: 1000,//单位为kb，如果为0表示不限制文件大小
maxFileCount: 10,//最大文件数
uploadAsync:false,//是否同步 同步就是一个post解决否则会请求多个post
uploadExtraData: function (previewId, index) {//这个方法里添加请求附带的参数json格式，这里我用了加密的参数
if(!that.LOCK){
that.LOCK=true;//如果没锁就锁着
that.DAEMap=that.encodeParam();//加密参数(userId,username...)
}else{
console.log("LOCK-->uploadExtraData");
}
return that.DAEMap['param'];//返回加密后的参数
},
slugCallback: function (filename) {//选择文件后会吊起这个方法
that.LOCK=false;//为啥在这里释放锁,试试就知道
console.log(filename);//打印文件名字
return filename.replace('(', '_').replace(']', '_').replace(' ','');//替换文件名中的字符
}
}).on("fileuploaded", function (event, data) {//
//异步上传成功后唤起的方法
}).on("filebatchuploadsuccess",function(event, data, previewId, index){//同步上传成功后唤起的方法
alert("图片上传成功!");
console.log("清空");
that.clearFileInput();//清空插件
data=data.response;//获取后台返回数据
let result = JSON.parse(that.DAEService.decryptBy3DES(data.data, DAEObj['key'])//解密后台返回数据
console.log(result);
that.DAEMap={};
}).on('filebatchuploaderror',function(event, data, msg){//上传失败唤起方法
console.log(event);
console.log(data);
console.log(msg);
alert("文件上传出错!请重试");
that.clearFileInput();
// that.LOCK=false;
});
};
这里需要指出的是uploadExtraData方法会在很多情况下唤起，所以这里我们使用的是RSA+DES3加密，会造成秘钥混乱，所以我们这里加了一个锁LOCK，解锁的地方也很特殊，大家可以尝试一下
感兴趣的童鞋可以看看这个插件的中文文档(当然官网最好http://plugins.krajee.com/file-input)
https://blog.csdn.net/u012526194/article/details/69937741
网友评论