BootStrap 文件上传：fileinput.js 实例与配置

"本示例介绍如何使用BootStrap的fileinput.js插件实现文件上传功能。" Bootstrap的fileinput.js是一个强大的文件上传组件，它提供了丰富的自定义选项和功能，如多文件选择、预览、上传进度显示、文件类型限制等。以下是对标题和描述中涉及的知识点的详细说明： 1. fileinput.js 插件：fileinput.js 是一个基于Bootstrap框架的文件上传插件，它可以增强HTML5的`<input type="file">`元素，使其具有更友好的用户界面和更多的交互功能。 2. 引入插件：在HTML中，我们需要引入fileinput.css和fileinput.js两个核心文件，以及fileinput_locale_zh.js，这是中文语言包，用于本地化显示文本。 ```html <link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" /> <script type="text/javascript" src="fileinput/js/fileinput.js"></script> <script type="text/javascript" src="fileinput/js/fileinput_locale_zh.js"></script> ``` 3. HTML 设置：创建一个`<form>`元素，并在其中放置一个`<input type="file">`元素，用于选择文件。设置`enctype="multipart/form-data"`是为了支持文件上传。 ```html <form enctype="multipart/form-data"> <input id="file-file" class="file" type="file" multiple> </form> ``` 4. 初始化设置：使用JavaScript进行插件的初始化配置。这里有一个名为`initFileInput`的函数，接受控件名称（ctrlName）和上传URL作为参数。 ```javascript function initFileInput(ctrlName, uploadUrl) { var control = $('#' + ctrlName); control.fileinput({ // 配置项 resizeImage: true, maxImageWidth: 200, maxImageHeight: 200, resizePreference: 'width', language: 'zh', // 设置语言为中文 uploadUrl: uploadUrl, uploadAsync: true, allowedFileExtensions: ['jpg', 'png', 'gif'], // 只接受jpg、png、gif格式的文件 showUpload: true, // 是否显示上传按钮 showCaption: true, // 是否显示标题 browseClass: "btn btn-primary", // 按钮样式 previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", maxFileCount: 3, // 最大允许上传的文件数 msgFilesTooMany: "选择图片超过了最大数量", maxFileSize: 2000, // 单个文件的最大大小，单位KB }); }; ``` 5. 配置项详解： - `resizeImage`：是否允许缩放图像。 - `maxImageWidth` 和 `maxImageHeight`：设定上传图片的最大宽度和高度。 - `resizePreference`：调整图像时优先考虑宽度或高度。 - `language`：设置插件的语言。 - `uploadUrl`：文件上传的服务器端接口地址。 - `uploadAsync`：是否使用异步上传。 - `allowedFileExtensions`：允许上传的文件扩展名数组。 - `showUpload` 和 `showCaption`：控制上传按钮和标题是否显示。 - `browseClass`：自定义浏览按钮的CSS类。 - `previewFileIcon`：预览图标。 - `maxFileCount`：允许上传的最大文件数量。 - `msgFilesTooMany`：当选择的文件超过最大数量时的提示信息。 - `maxFileSize`：单个文件的最大大小。 6. 调用初始化函数：在页面加载完成后，根据需要调用`initFileInput`函数，传入对应的控件ID和上传接口URL，以启动文件上传组件。 7. 文件上传流程：用户选择文件后，fileinput.js会处理预览，如果设置了上传URL，点击上传按钮后，文件会被发送到指定的服务器端接口进行处理。同时，插件会提供上传进度和错误反馈。 通过以上步骤，你可以创建一个功能完备的Bootstrap fileinput.js文件上传组件，为用户提供更加便捷和美观的文件上传体验。记得根据实际项目需求调整配置项，确保与服务器端接口的配合无误。