使用Webupload实现异步上传图片
生活随笔
收集整理的這篇文章主要介紹了
使用Webupload实现异步上传图片
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
首先將 Webupload壓縮包放在public下 或下載安裝包
前端html代碼
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css"><script type="text/javascript" src="/webuploader/webuploader.js"></script>{{--前端validation 驗證--}}<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script><script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script><script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> </head> <body><form role="form" method="post" action="{{url('addData')}}" enctype="multipart/form-data" id="signupForm">@csrf<div class="form-group"><!--dom結構部分--><div id="uploader-demo"><!--用來存放item--><div id="fileList" class="uploader-list"></div><div id="filePicker">選擇圖片</div><input type="hidden" name="pic" id="imgpic" value=""><img src="" id="pics" style="width: 100px;height: 50px"></div></div><div class="form-group"><label for="name">標題</label><input type="text" class="form-control" id="name"placeholder="請輸入標題" name="title"></div><div class="checkbox"><label for="name">是否可見</label>是：<input type="radio" name="show" value="0">否： <input type="radio" name="show" value="1"></div><button type="submit" class="btn btn-default">提交</button> </form> <script type="text/javascript">// 初始化Web Uploadervar uploader = WebUploader.create({// 選完文件后，是否自動上傳。auto: true,// swf文件路徑swf: '/Uploader.swf',formData:{_token:"{{csrf_token()}}"},// 文件接收服務端。server: '{{route('addImage')}}',fileVal:'pic',// 選擇文件的按鈕。可選。// 內部根據當前運行是創建，可能是input元素，也可能是flash.pick: '#filePicker',compress:{width: 200,height: 200,// 圖片質量，只有type為`image/jpeg`的時候才有效。quality: 100,// 是否允許放大，如果想要生成小圖的時候不失真，此選項應該設置為false.allowMagnify: false,// 是否允許裁剪。crop: false,// 是否保留頭部meta信息。preserveHeaders: true,// 如果發現壓縮后文件大小比原來還大，則使用原來圖片// 此屬性可能會影響圖片自動糾正功能noCompressIfLarger: false,// 單位字節，如果圖片大小小于此值，不會采用壓縮。compressSize: 0},// 只允許選擇圖片文件。accept: {title: 'Images',extensions: 'jpg,jpeg,png',mimeTypes: 'image/*'},});//上傳成功uploader.on( 'uploadSuccess', function( file,ret ) {$("#imgpic").val(ret.pic)$("#pics").attr('src',ret.pic)});$("#signupForm").validate({rules: {title: {required: true,minlength: 3,},},messages: {title: {required: "請輸入密碼",minlength: "密碼長度不能小于 3 個字符",},},submitHandler:function(form){form.submit();}})</script></body> </html>通過路由進入后端 進行圖片上傳
控制器偽代碼實例
public function addImage(Request $request){$file=$request->file('pic')->store('','pic');$pic="/uplodes/".$file;return ['code'=>200,'pic'=>$pic];}laravel框架中需自己定義上傳圖片的路由
Route::post("addImage",'ImageController@addImage')->name('addImage');配置上傳路徑 在config下的filesystems.php中配置
'pic' => ['driver' => 'local','root' => public_path('uploads/pic'),],總結
以上是生活随笔為你收集整理的使用Webupload实现异步上传图片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Rk3566 Rk3326s Andro
- 下一篇： mysql80从入门到精通配套源码