Laravel5.2多图上传的实现以及上传七牛

在模版中引入我们的CSS和JS文件，感谢JS的原作者黑爪爪

1.首先，请去下载对应的组件，百度网盘：

链接: https://pan.baidu.com/s/1QpwA7q7ACv95-8aRTWMwvw 提取码: a9us

2.然后，我们在模板文件中引用

<script src="{
  {asset('lib/js/jquery-2.0.3.min.js')}}"></script>
<link href="{
  {asset('lib/css/webuploader.css')}}" rel="stylesheet">
<link href="{
  {asset('lib/css/diyUpload.css')}}" rel="stylesheet">
<script src="{
  {asset('lib/js/webuploader.html5only.min.js')}}"></script>
<script src="{
  {asset('lib/js/diyUpload.js')}}"></script>

3.模版中的CSS

<style>
*{ margin:0; padding:0;}
#box{ margin:50px auto; width:30%px; min-height:400px; background:#ff9}
</style>

 

 

4.模版HTML中的图片上传块

<form action="/admin/picture/store" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="_token" value="{
  { csrf_token() }}">
    <div id="box">
         <div id="test" ></div>
    </div>
    <input type="hidden" name="pics" id='pics'>
    <button class="btn btn-lg btn-info" id='show'>上传</button>
</form>

 

 

5.模版中的JS代码

$(function(){
    $('#test').diyUpload({
    url:"{
  {URL('some_upload_img')}}",
    success:function( data ) {
        console.log(data);
        $("#pics").after("<input type='hidden' class='hidpic' value="+data.pic+">"); //图片上传成功会执行，就是把图片名字写到CLASS为HIDPIC的隐藏域里

    },
    error:function( err ) {
        console.info( err );    
    }
    });

    $('#show').clic