JS+Bootstrap 系列之 bootstrap-fileinput 与laravel

上传文件有不少JS插件目前使用的是百度的webupload 由于 在单页面 多个文件上传时  webupload并不那么好用  渐渐探索到了bootstrap-fileinput

现在主要使用语言仍然是PHP  框架是laravel 

HTML代码如下

 <form enctype="multipart/form-data">
            <input type="file" name="file" id="txt_file" multiple class="file-loading" />
            <input type="hidden" id='图片地址' value=''>
 </form>

css js所需引入的文件

        <!-- 最新的 Bootstrap 核心 css文件 -->
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <!-- 最新的 fileinput核心 css文件 -->
        <link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css" />

        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <script src="../js/fileinput.js" type="text/javascript"></script>
        <script src="../js/locales/zh.js" type="text/javascript"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

         $("#txt_file").fileinput({
                language: 'zh',
                uploadUrl: '{{url('fun2')}}', // 上传文件的后台地址
                allowedFileExtensions : ['jpg', 'png','gif'],
                overwriteInitial: false,
                maxFileSize: 1000,     //最大文件大侠
                maxFilesNum: 10,     //最多文件数
                uploadExtraData: { '_token':'{{csrf_token()}}' },  //表单额外的内容 如laravel中 POST方式往往需要携带 _token
                //allowedFileTypes: ['image', 'video', 'flash'],
                slugCallback: function(filename) {
                   // return filename.replace('(', '_').replace(']', '_');
                }
          });
         //上传完成后的回掉
          $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
              //！！！我个人使用的时候！！！返回值必须为json格式
              //我在后台程序 单纯的返回了  json_encode('/storage/img/3142353534.jpg')
              //但是在这里仍然需要使用data.response获取图片地址
               $('#图片地址').val(data.response);
          });

　　

           //后台PHP处理上传的文件 （laravel5.*）
            $file = Input::file('file');



            //检验一下上传的文件是否有效.

            $clientName = $file -> getClientOriginalName();

            $tmpName = $file ->getFileName(); 

            $realPath = $file -> getRealPath();  

            $extension = $file -> guessExtension();

            $mimeTye = $file -> getMimeType();


           //这里要注意一点,以前我们使用 mime_content_type() ,在php5.3 之后,开始使用 fileinfo 来获取文件的mime类型.所以要加入 php_fileinfo的php拓展.windows下是 php_fileinfo.dll,在php.ini文件中将 extension=php_fileinfo.dll前面的分号去掉即可.当然要重启服务器.

            //$path = $file -> move('storage/uploads');
            $newName = str_random(18).".".$extension;
            $path = $file -> move(base_path().'/public/storage/uploads',$newName);
            return json_encode('/storage/uploads/'.$newName);

　至此就可以使用bootstrap风格的文件上传了