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

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

 81737  487  查看评论 (97)
分享到微信朋友圈
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>
相关插件-上传

h5拖拽文件图片上传插件

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

jQuery多图压缩上传

前端对图片的压缩、可以选择多张、可以预览、还可以删除
  上传
 53581  398

jQuery多图上传插件imgUp.js

可以多图的上传,预览,并带删除功能
  上传
 120905  949

手机端实现多图片上传预览

HTML+CSS+原生JS实现手机端实现多图片上传,选中图片后,可以点击放大(有一定的注释,在PC,ipad,IOS和安卓上都测试过)
  上传
 31501  306

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

    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
    谢谢分享,就是分要的多了点。 回复
    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 回复
    As 0
    2018/6/8 11:51:07
    多个图片上传能修改吗 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复