bootstrap inputfile（前端bootstrap-inputfile插件常用属性总结）

元宇宙 • 2022-06-09 11:34:57 • 软件

Bootstrap-inputfile前端上传插件到底如何定义前？

提示：正文部分阅读约三分钟，代码部分请读者进行实践体会。

上传图片的常用设置如下。

HTML：

<input name="files" id="input-id" type="file" class="file-loading" />

bootstrap inputfile（前端bootstrap-inputfile插件常用属性总结）

后端c#代码

前端Javascript：

$("#input-id").fileinput();//默认写法，fileinput里面的所有参数是设置为默认

具体常用的几个参数设置说明及例子：

1.上传到后台数据哪个路由?这个是上传到upload/upload2处理数据。

uploadUrl: '../../upload/upload2',

2.预览设置。

2.1 使用的是JSON格式。图片设置为500px宽和长

previewSettings: {//预览图片大小设置*****************

image: { width: "500px", height: "500px" }

2.2可使用字符串加载文件预览图，也可用数组。

initialPreview: "../../downloadSource/images/resizeApi.png",//初始化时显示已有数据

initialPreview: [ //初始预览设置

"<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>",

"<img src='/images/jellyfish.jpg' class='file-preview-image' alt='Jelly Fish' title='Jelly Fish'>",],

2.3//初始化时预览设置，共六个属性，

initialPreviewConfig: {

caption: '555', // 展示的文件名

width: '120px',

style: 'max-width:100%;max-height:100%;',

downloadurl: "", // 下载url

key: "id", // 删除是Ajax向后台传递的参数,

type: 'image' // 预览文件类型

bootstrap inputfile（前端bootstrap-inputfile插件常用属性总结）

关于删除图片的key参数后端c#代码

3.额外数据上传设置。可以在上传文件数据同时，追加传入参数，如上传一张送货单图同时传入一个收货单号。

以function传入

uploadExtraData: function () {//*******************

//向后台传递formData作为额外参数，后台可以根据id修改对应的图片地址。

return { 'recID': $("#ID").html() };

//上传时额外附加参数

以上，分享到这里，希望对你有帮助。谢谢。下回将继续探索更多有用的插件。

插件学习重在实践，因笔者使用的C#，后台代码只截取了两张与前端相关较大的图片供参考。