blueimp/jQuery-File-Upload with Laravel 如何集成?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/24850162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-14 09:50:14  来源:igfitidea点击:

blueimp/jQuery-File-Upload with Laravel How to integrate?

phpjquerylaravelimage-uploading

提问by commandantp

Trying to build my upload images part of my site and wanted to use blueimp/jQuery-File-Upload instead of hardcoding everything from scratch. However I am new too all that, could you tell me HOW to integrate that plugin with my Laravel structure?

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

Where do I put all the files ? In vendors folder ? Or should I split all the folders and put their js folder in mine etc???

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

If you know a tutorial it is even better... Couldn't find anything good with google.

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

Thanks

谢谢

回答by HaRsH

You can try this code I'm posting to help others.

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

The first step is to define the upload page and upload handling Routes, like this:

第一步是定义上传页面和上传处理Route,像这样:

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

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

Make your image.upload-formview something like this (I'm using simple HTML, not a Bladetemplate):

使您的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() ?>

Now you need to add the JavaScript files in that view page's <HEAD>tag:

现在您需要在该视图页面的<HEAD>标签中添加 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> 

Finally, here's a simple example of code for the ImageController@postUploadcontroller to get the uploaded file, and move it to a destination folder:

最后,这是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)]);
            }
        }
    }