引入相关js

<script src="{{ asset('bootstrap-fileinput/js/fileinput.js') }}"></script>
<script src="{{ asset('bootstrap-fileinput/js/fileinput.min.js') }}"></script>

html代码

<div class="form-group {{ $errors->has('idcard_front') ? ' has-error' : '' }}">
<label class="control-label col-sm-2" for="inputSuccess3">身份证正面</label>
<div class="col-sm-6">
<input id="input-b4b" name="idcard_front" type="file" value="">
<input id="idcard_front" name="id_card_front" type="hidden" value="">
</div>
@if ($errors->has('idcard_front'))
<span class="help-block">
<strong>{{ $errors->first('idcard_front','请上传您的身份证正面') }}</strong>
</span>
@endif
</div>

js代码

$("#input-b4b").fileinput({
language: 'zh', //设置语言
uploadUrl: "url", //上传的地址
allowedFileExtensions: ['jpg', 'jpeg', 'gif', 'png'],//接收的文件后缀
browseLabel: '选择文件',
removeLabel: '删除文件',
removeTitle: '删除选中文件',
cancelLabel: '取消',
cancelTitle: '取消上传',
uploadLabel: '上传',
uploadTitle: '上传选中文件',
dropZoneTitle: "请通过拖拽图片文件放到这里",
dropZoneClickTitle: "或者点击此区域添加图片",
uploadAsync: true, //默认异步上传
showUpload: true, //是否显示上传按钮
showRemove: true, //显示移除按钮
showPreview: true, //是否显示预览
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
dropZoneEnabled: true,//是否显示拖拽区域
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
maxFileSize: 2000,//单位为kb,如果为0表示不限制文件大小
//minFileCount: 0,
maxFileCount: 10, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount: true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!"
}).on("filebatchselected", function (event, files) {
$(this).fileinput("upload");
})
.on("fileuploaded", function (event, data) {
if (data.response) {
var picdir = data.response;
$("#idcard_front").val(picdir);
}
});
 

说明一下:引入汉化包没有生效,mmp!!! 自己汉化吧!

后台处理代码:

public function uploadimg(Request $request)
{
if($request->isMethod('post'))
{ $file = $request->file('idcard_front');
if($file){
$extension = $file -> guessExtension();
$newName = str_random(18).".".$extension;
$file -> move(base_path().'/public/storage/uploads',$newName);
$idCardFrontImg = '/upload/file/'.$newName;
return json_encode($idCardFrontImg);
}else{
$idCardFrontImg = '';
return json_encode($idCardFrontImg);
}
}
}

暂时做个备份,仅供参考!多多交流!

laravel5.5结合bootstrap上传插件fileinput 上传图片的更多相关文章

  1. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  2. Bootstrap 文件上传插件 FileInput的使用问题

    : 在使用bootstrap的文件上传插件fileinput http://plugins.krajee.com/file-input的预览功能时,删除预览图片在 bootstrap 模态框中没有用, ...

  3. bootsrap 上传插件fileinput 简单使用

    1.安装 下载fileinput文件,载入对应的css+js文件,如下: <link href="css/bootstrap.min.css" rel="style ...

  4. 支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput 的ajax异步上传(转载)

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...

  5. yii2组件之多图上传插件FileInput的详细使用

    作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...

  6. 支持多文件上传,预览,拖拽,基于bootstra的上传插件fileinput 的ajax异步上传

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...

  7. Bootstrap FileInput 多图上传插件 文档属性说明

    Bootstrap FileInput 多图上传插件   原文链接:http://blog.csdn.net/misterwho/article/details/72886248?utm_source ...

  8. 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

  9. Bootstrap文件上传插件File Input的使用

    基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...

随机推荐

  1. 【curl】cookie的分隔符

    cookie是以分号作为分隔符的. ex: curl --silent -H "Host: xxx.com" "172.172.178.9:80/item/comm?pi ...

  2. 爬虫之Handler处理器和自定义Opener

    一.Handler处理器和自定义Opener opener是 request.OpenerDirector 的实例,我们之前一直都在使用的urlopen,它是一个特殊的opener(也就是模块帮我们构 ...

  3. HTTS TTLS 433

    HTTP和HTTPS协议,看一篇就够了 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/x ...

  4. SpringCloud 入门知识篇

    SpringCloud 入门 springcloud 学习 7天学会springcloud 教程 https://www.cnblogs.com/skyblog/category/738524.htm ...

  5. 大v用户数据统计分析

    1,统计数据的基本情况,包括微博总数,用户总数,最活跃和最不活跃的用户id #!/bin/sh source_dir=/home/minelab/data/DATA source_file_name= ...

  6. Java中的可变参数

    1.什么是可变参数 可变参数是JDK1.5的新特性,允许一个方式接受任意数量的参数 public static void main(String[] args) { print("a&quo ...

  7. Detectron系统实现了最先进的物体检测算法https://github.com/facebookresearch/Detectron

    ,包括Mask R-CNN. 它是用Python编写的,支持Caffe2深度学习框架. 不久前,FAIR才开源了语音识别的工具wav2letter,戳这里看大数据文摘介绍<快讯 | Facebo ...

  8. LInux 下PHP环境配置 Redis 总结

    系统 Deepin ,环境 PHP7.0 + Apache2 安装 Redis 服务 sudo apt-get install redis-server //安装 sudo /etc/init.d/r ...

  9. MAC截图工具

    截图快捷键 ctrl+shift+A

  10. 使用js如何获取treeview控件的当前选中的节点

    var selectedNodeID = theForm.elements["<%=treeView1.ClientID%>_SelectedNode"].value; ...