fileinput-bootstrap简单使用

#fileinput-bootstrap简单使用

因为手上一个小项目使用的是bootstrap做的页面组织,而组里面现有的图片加载上传稍微有点儿丑,而且不能达到甲方的要求,所以就找到了这个插件。因为api是英文的所以开始还是有点小问题的,不过这些都还是能克服的。

因为项目里是直接把图片数据直接储存到oracle数据据库里面,回显上稍微有点儿不一样。

资料

功能

  • 上传前:加载,删除,上传
  • 上传后:回显,删除

代码

<!--这个引入是模仿的ajax返回的bolb的数据流-->
<!--
    photos.json:
       var data =  {"photos":"/9j/4AAQSkZJRgABAQAAAQA....",
                    "uuid":"25ab011f338f41bebcc55a94d4aaf03f"}
-->
<script src="../photos.json" type="text/javascript"></script>

<form enctype="multipart/form-data">
  <div class="form-group">
            <div class="file-loading">
                <label>Preview File Icon</label>
                <input id="file-3" type="file" multiple>
            </div>
        </div>
</form>

form表单需要使用:enctype=“multipart/form-data”

//这有个坑:
//这里单独说一句:如果是使用的是$(document).ready(...这种方式,那么在html中不要添加class= file
//不然的初始化是完成不了的。
$(document).ready(function () {
    //得到photos的长度
    var len = ''+data.photos+''.length
    var url = baseURL+"users/user/delPhotosCtrl"
    //数据回显的数据需要加载成为img 才能正常回显
    // style需要使用:
    //style=\"width: auto;height: auto;max-width: 100%;max-height: 100%;\" 
    var initialPreview= [
            "<img  style=\"width: auto;height: auto;max-width: 100%;max-height: 100%;\" class=\"file-preview-image \"  src=\"data:image/png;base64,"+data.photos+"\"/>"
            ];
    //caption:图片名称,size:大小,width:宽度,url:删除访问地址,key:删除id

    //initialPreview: [
    //     "http://lorempixel.com/1920/1080/nature/1",
    //     "http://lorempixel.com/1920/1080/nature/2",
    //     "http://lorempixel.com/1920/1080/nature/3"
    //     ],
    //initialPreviewConfig: [
    //     {caption: "nature-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1},
    //     {caption: "nature-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2},
    //     {caption: "nature-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3}
    //      ]
    //如果你使用的是这种加载方式,url就不要改变,直接使用 "{$url}",就可以了。
    //如果使用的是和我一样是回显的数据或者储存到数据里的的话需要单独写一个地址
    var initialPreviewConfig=[{caption: "transport-1.jpg", size: len, width: "120px", url: url, key: data.uuid}]

    $("#file-3").fileinput({
        theme: 'fas',
        //上传地址,比如:"http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址
        'uploadUrl': "http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址
        //这里是用来添加上传是附带的数据的
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        showUpload: false,
        showCaption: false,
        overwriteInitial: false,
        //这里是个坑:
        //默认使用true,这里需要修改为false
        //资料地址:
        //https://github.com/kartik-v/bootstrap-fileinput/issues/669
        initialPreviewAsData: false,
        initialPreview: initialPreview,
        initialPreviewConfig: initialPreviewConfig
        });
});

先这样,有时间粘一下java代码,看之后的心情

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值