内容纲要

修改路由 routes/web.php

[code language=”php”]
Route::get(‘get-image’,’ImageController@getImage’);
Route::post(‘ajax-upload-image’, [‘as’=>’ajax.upload-image’,’uses’=>’ImageController@ajaxUploadImage’]);
[/code]

创建控制器 app/Http/Controllers/ImageController.php

[code language=”php”]
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ImageController extends Controller
{
public function getImage(){
return view(‘ajaxUploadImage’);
}
public function ajaxUploadImage(Request $request){
$this->validate($request, [
‘image’ => ‘required|image|mimes:jpeg,png,jpg,gif,svg|max:2048′,
]);
$image = time().’.’.$request->image->getClientOriginalExtension();
$request->image->move(public_path(‘images’), $image);
$url=’images/’.$image;
return response()->json([‘url’=>$url]);
}
}
[/code]

创建视图 resources/views/ajaxUploadImage.blade.php ,并包含以下三个文件

bootstrap.min.css
jquery.min.js
jquery.form.min.js

[code language=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Laravel 5 – Ajax upload image to server without refresh the page with preview</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.1/jquery.form.min.js"></script>
</head>
<body>
<div class="container">
<h1>Laravel 5 – jQuery ajax upload image with example</h1>
{!! Form::open([‘route’=>’ajax.upload-image’,’files’=>’true’]) !!}
<div class="alert alert-danger error-msg" style="display:none">
<ul></ul>
</div>
<div class="preview-uploaded-image">
</div>
<div class="form-group">
<label>Image:</label>
<input type="file" name="image" class="form-control">
</div>
<div class="form-group">
<button class="btn btn-primary upload-image" type="submit">Upload Image</button>
</div>
{!! Form::close() !!}
</div>
<script type="text/javascript">
$("body").on("click",".upload-image",function(e){
$(this).parents("form").ajaxForm({
complete: function(response)
{
if($.isEmptyObject(response.responseJSON.image)){
$(‘.preview-uploaded-image’).html(‘<img src="’+response.responseJSON.url+’">’);
}else{
var msg=response.responseJSON.image;
$(".error-msg").find("ul").html(”);
$(".error-msg").css(‘display’,’block’);
$.each( msg, function( key, value ) {
$(".error-msg").find("ul").append(‘<li>’+value+'</li>’);
});
}
}
});
});
</script>
</body>
</html>
[/code]

发表评论

电子邮件地址不会被公开。 必填项已用*标注