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
blueimp/jQuery-File-Upload with Laravel How to integrate?
提问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 Route
s, like this:
第一步是定义上传页面和上传处理Route
,像这样:
Route::get('image_', function() {
return View::make('image.upload-form');
});
Route::post('image_updade', 'ImageController@postUpload');
Make your image.upload-form
view something like this (I'm using simple HTML, not a Blade
template):
使您的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@postUpload
controller 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)]);
}
}
}