laravel file upload
==================
Laravel 操作 File Upload 的幾個函數
http://blog.twbryce.com/laravel-%E6%93%8D%E4%BD%9C-file-upload-%E7%9A%84%E5%B9%BE%E5%80%8B%E5%87%BD%E6%95%B8/
getFilename() 取得檔案名稱(暫存檔時的名稱)
getClientOriginalName() 取得檔案的最原始檔名
getClientSize() 取得檔案大小
getClientMimeType()
guessClientExtension() 取得檔案副檔名
getRealPath() 取得檔案的位置
move() 移動檔案
==================
Upload Image in Laravel using Ajax
https://www.webslesson.info/2018/09/upload-image-in-laravel-using-ajax.html
*Controller:
php artisan make:controller AjaxUploadController
app\Http\Controllers\AjaxUploadController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Validator;
class AjaxUploadController extends Controller
{
function index(){
return view('ajax_upload');
}
function action(Request $request){
$validation = Validator::make($request->all(), [
'select_file' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048'
]);
if($validation->passes()){
$image = $request->file('select_file');
$new_name = rand() . '.' . $image->getClientOriginalExtension();
$image->move(public_path('images'), $new_name);
return response()->json([
'message' => 'Image Upload Successfully',
'uploaded_image' => '<img src="/images/'.$new_name.'" class="img-thumbnail" width="300" />',
'class_name' => 'alert-success'
]);
}else{
return response()->json([
'message' => $validation->errors()->all(),
'uploaded_image' => '',
'class_name' => 'alert-danger'
]);
}
}
}
/*
http://127.0.0.1:8000/ajax_upload
*/
-------------
*view:
resources\views\ajax_upload.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Upload Image in Laravel using Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container">
<h3 align="center">Upload Image in Laravel using Ajax</h3>
<br />
<div class="alert" id="message" style="display: none"></div>
<form method="post" id="upload_form" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="form-group">
<table class="table">
<tr>
<td width="40%" align="right"><label>Select File for Upload</label></td>
<td width="30"><input type="file" name="select_file" id="select_file" /></td>
<td width="30%" align="left"><input type="submit" name="upload" id="upload" class="btn btn-primary" value="Upload"></td>
</tr>
<tr>
<td width="40%" align="right"></td>
<td width="30"><span class="text-muted">jpg, png, gif</span></td>
<td width="30%" align="left"></td>
</tr>
</table>
</div>
</form>
<br />
<span id="uploaded_image"></span>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#upload_form').on('submit', function(event){
event.preventDefault();
$.ajax({
url:"{{ route('ajaxupload.action') }}",
method:"POST",
data:new FormData(this),
dataType:'JSON',
contentType: false,
cache: false,
processData: false,
success:function(data)
{
$('#message').css('display', 'block');
$('#message').html(data.message);
$('#message').addClass(data.class_name);
$('#uploaded_image').html(data.uploaded_image);
}
})
});
});
</script>
-------------
*route:
Route::get('/ajax_upload', 'AjaxUploadController@index');
Route::post('/ajax_upload/action', 'AjaxUploadController@action')->name('ajaxupload.action');
==================
沒有留言:
張貼留言