blueimp/jQuery-File-Upload 与 Laravel 如何集成？

Posted

技术标签:

【中文标题】blueimp/jQuery-File-Upload 与 Laravel 如何集成？【英文标题】：blueimp/jQuery-File-Upload with Laravel How to integrate? 【发布时间】：2014-09-11 01:50:34 【问题描述】：

尝试构建我网站的上传图片部分，并希望使用 blueimp/jQuery-File-Upload 而不是从头开始对所有内容进行硬编码。不过我也是新手，你能告诉我如何将该插件与我的 Laravel 结构集成？

我将所有文件放在哪里？在供应商文件夹中？或者我应该拆分所有文件夹并将他们的 js 文件夹放在我的等中吗？？？

如果你知道一个教程，那就更好了...... 用谷歌找不到任何好东西。

谢谢

【问题讨论】：

您的问题太宽泛，请尝试具体说明您的问题。 好吧，重新表述的结尾试图让更清楚:) 您可以将 js 和 css 文件放入 public/ 文件夹或使用像 Bower 这样的管理器来为您完成。 @delmadord 依赖关系如何？ ` "依赖": "jquery": ">=1.6", "blueimp-tmpl": ">=2.5.3", "blueimp-load-image": ">=1.11.0", "blueimp-canvas -to-blob": ">=2.1.0"` 我的错，它们被“包含”了....该死的，这不直观！！！ :p 【参考方案1】：

您可以尝试我发布的此代码以帮助他人。

第一步是定义上传页面和上传处理Routes，像这样：

Route::get('image_', function() 
    return View::make('image.upload-form');
);

Route::post('image_updade', 'ImageController@postUpload');

让您的image.upload-form 显示类似这样的内容（我使用的是简单的 html，而不是 Blade 模板）：

<?php echo Form::open(array('url' => 'image_updade', 'files' => true, 'id' => 'myForm')) ?> 
    Name: <input type='file' name='image' id='myFile'/>
    <br/>
    Comment: <textarea name='comment'></textarea>
    <br/>
    <input type='submit' value='Submit Comment' /> 
<?php echo Form::close() ?>

现在您需要在该视图页面的 &lt;HEAD&gt; 标签中添加 javascript 文件：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js'></script> 
<script src='http://malsup.github.com/jquery.form.js'></script> 

<script> 
    // Wait for the DOM to be loaded 
    $(document).ready(function() 

        // Bind 'myForm' and provide a simple callback function 
        $('#myForm').ajaxForm(function() 
            alert('Thank you for your comment!');
        );

        $('#myFile').change(function() 
            $('#myForm').submit();
        );
    );
</script>

最后，这是一个简单的代码示例，用于ImageController@postUpload 控制器获取上传的文件，并将其移动到目标文件夹：

<?php

    class ImageController extends BaseController 

        public function getUploadForm() 
            return View::make('image/upload-form');
        

        public function postUpload() 

            $file = Input::file('image');
            $input = array('image' => $file);
            $rules = array( 'image' => 'image');
            $validator = Validator::make($input, $rules);

            if ( $validator->fails() )
                return Response::json(['success' => false, 'errors' => $validator->getMessageBag()->toArray()]);
            
            else 
                $destinationPath = 'files/';
                $filename = $file->getClientOriginalName();
                Input::file('image')->move($destinationPath, $filename);
                return Response::json(['success' => true, 'file' => asset($destinationPath.$filename)]);

【讨论】：

您的表单中的 csrf_token 在哪里？

以上是关于blueimp/jQuery-File-Upload 与 Laravel 如何集成？的主要内容，如果未能解决你的问题，请参考以下文章