图片预览上传插件bootstrap-fileinput.js

所属分类:输入,其他-上传

 85062  494  查看评论 (99)
分享到微信朋友圈
X
图片预览上传插件bootstrap-fileinput.js ie兼容9

更新时间:2017/12/22 下午5:12:09

更新说明:修改错误,之前把form标签id和enctype写到div上了


引入css

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-fileinput.css" rel="stylesheet">

引入js

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/bootstrap-fileinput.js"></script>
<script type="text/javascript">
    $(function() {
        //比较简洁,细节可自行完善        
        $('#uploadSubmit').click(function() {
            var data = new FormData($('#uploadForm')[0]);
            $.ajax({
                url: 'xxx/xxx',
                type: 'POST',
                data: data,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {
                    console.log(data);
                    if (data.status) {
                        console.log('upload success');
                    } else {
                        console.log(data.message);
                    }
                },
                error: function(data) {
                    console.log(data.status);
                }
            });
        });
    })
</script>
相关插件-上传

html5 头像上传更换插件

html5 头像上传、更换、剪切插件
  上传
 172969  1329

zyupload图片上传修改版

在原zyupload基础上增加了放大,删除,目录选择功能 。上传的图片可以轮播查看, 上传图片有拖拽图片和文件功能
  上传
 59259  382

h5拖拽文件图片上传插件

支持拖拽上传,拖拽排序,图片压缩的简单上传插件
  上传
 68736  495

基于webuploader多图片上传插件diyUpload.js

多张图片上传 base64格式 移动端可支持,代码中有详细注释。
  上传
 86506  571

讨论这个项目(99)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    k6xiao 1
    2023/5/30 22:19:32

    BUG:当只上传1张图片时,提示至少上传两张,实际上已经设置了minFileCount: 1,    //最小文件个数
    修复:fileinput.js第1994行,

    data = new FileInput(this, $.extend({}, $.fn.fileinput.defaults, options, $(this).data()));

    改为

    data = new FileInput(this, $.extend({}, $.fn.fileinput.defaults, $(this).data(), options));
    回复
    G.怪蜀黍 0
    2020/2/19 23:07:36
    不错,很不错的插件 回复
    zhuchuanjun 0
    2019/7/3 11:43:54
    我想知道,这个fileninput.js上传文件,对于上传文件的名称长度可以做限制吗?有限制名称最长多少吗?太过于长会报错,怎么处理? 回复
    娃娃的娃娃 0
    2019/3/21 13:03:53
    谢谢分享,就是分要的多了点。
        右眸°remnant0
        2023/3/6 9:03:38
        知足吧
    回复
    rm -rf /* 0
    2019/2/21 13:57:13
    求分享445368087@qq.com 回复
    WOLF 0
    2019/2/9 21:11:34
    superdameng 0
    2019/1/9 17:27:22
    这个怎么在一个页面中同时使用两个插件? 回复
    123 0
    2018/11/6 16:59:51
    ?? 深水鱼?? 0
    2018/6/27 13:39:38
    还行吧割发代首 回复
    xTao 0
    2018/6/12 11:38:48
    可以分享到qq邮箱:1807205432@qq.com 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复