Bootstrap 文件上传组件 --- Bootstrap fileinput 使用方法记录上传文件 java Bootstrap fileinput 上传文件

左手的ㄟ右手 2021-10-13 02:28 312阅读 0赞

## Bootstrap 文件上传组件 --- Bootstrap fileinput 使用方法记录 上传文件 ##

**一、下载地址**

1、下载： [https://github.com/kartik-v/bootstrap-fileinput][https_github.com_kartik-v_bootstrap-fileinput]

2、demo： [https://github.com/kartik-v/bootstrap-fileinput-samples][https_github.com_kartik-v_bootstrap-fileinput-samples]

3、示例： [http://plugins.krajee.com/file-input/demo][http_plugins.krajee.com_file-input_demo]

**二、代码示例**

**1、引入 css 和 js 文件** 。 （$\{ctxStatic \} 开头的是 bootstrap-fileinput 插件的文件）

**2、html 代码**

<h2>BootStrap FileInput 文件上传</h2>
    	<form enctype="multipart/form-data">
            <label>Chinese Input</label>
            <div class="file-loading">
                <input id="uploadFile" name="uploadFile" type="file" multiple >
            </div>
        </form>
        <hr>
        <h3>上传成功的图片显示在下面</h3>
        <div id="img_show"></div>

**3、插件相关配置**

**三、服务端接口**

１、配置好 **uploadUrl **服务端接口即可实现文件上传，这里不提供具体实现。毕竟服务端太多，　java，python，c，php 等等。

2、java 使用Servlet文件上传： [原生Servlet文件上传和下载Servlet多个文件上传][Servlet_Servlet]

3、java 使用SpringMVC文件上传： [springMVC使用ajax实现文件上传][springMVC_ajax]

**四、测试**

1、插件初始化后，效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70][]

2、选中文件后

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70 1][]

3、上传成功后，回显图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70 2][]

PS：有问题，请留言。 若写的不够明白，可以提供源码，谢谢。

[https_github.com_kartik-v_bootstrap-fileinput]: https://github.com/kartik-v/bootstrap-fileinput
[https_github.com_kartik-v_bootstrap-fileinput-samples]: https://github.com/kartik-v/bootstrap-fileinput-samples
[http_plugins.krajee.com_file-input_demo]: http://plugins.krajee.com/file-input/demo
[Servlet_Servlet]: https://blog.csdn.net/HaHa_Sir/article/details/81744629
[springMVC_ajax]: https://blog.csdn.net/HaHa_Sir/article/details/79161225
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70]: /images/20211013/ad50809fce3a4f5ebb06ad25b4cb09a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70 1]: /images/20211013/77d04e0abf924c0fa86a5586e6473193.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70 2]: /images/20211013/092205880da34a77a3ae51bbb640dc2c.png