基于Laravel5.6框架, 多图片上传扩展包

做了很多的外包网站, 有一些是有轮播图功能的,感觉这块的需求挺大的,于是抽时间看文档,自己一边学一边研究, 就把轮播图这块写成了一个小插件的形式,(JS代码是在网上找的)经过自己的雕琢,更改样式终于完成了。之后的Laravel框架, 只要有轮播图这块的需求,就全用这个代替了。下面来看一下介绍吧

 

packagist地址: https://packagist.org/packages/zl0314/jq-batch-upload

GITHUB地址: https://github.com/zl0314/jq-batch-upload

效果截图:

可以自定义图片数量, 和图片允许的宽高,图片预览是以base64的形式预览。可以对上传路径进行配置, 文件名进行配置,可以自定义input隐藏域名称。

安装以后, 执行以下命令, 发布资源文件和配置文件:

php artisan vendor:publish --tag=public --provider=Jq\BatchUpload\JqBatchUploadServiceProvider

php artisan vendor:publish --tag=config --provider=Jq\BatchUpload\JqBatchUploadServiceProvider

别忘记到config/app.php文件加载ServiceProvider:

…..

Jq\BatchUpload\JqBatchUploadServiceProvider::class,

使用:

<div class="form-group">
<label for="">轮播图</label>
<div class="box" id="box"> </div>
</div>

@include('BatchUpload::header')

<script type="text/javascript">
var imgFile = new ImgUploadeFiles('#box', function (e) {
this.init({
MAX: 1, //限制个数
inputName: 'pics',
MH: 800, //像素限制高度
MW: 300, //像素限制宽度
allowSize : '{{intval(ini_get('upload_max_filesize'))*1024*1024}}',
callback: function (dom) {
$.post('/jq-batch-upload/upload', {src: this.imgSrc}, function (res) {
        if(res.success == 1){
            $(dom).attr('realsrc', res.src);
            $(dom).find('input').val(res.src);
        }else{
            alert(res.message);
        }
    }, 'json');
},
remove: function (id) {
var realsrc = $('#batch_upload_' + id).attr('realsrc');
$.post('/jq-batch-upload/delete', {src: realsrc}, function (res) {

}, 'json');
}
});
});
</script>

 

 

0

发表评论

电子邮件地址不会被公开。