使用Webupload实现异步上传图片

首先将 Webupload压缩包放在public下 或下载安装包

前端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">
        
        <div id="uploader-demo">
            
            <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 Uploader
    var 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'),
        ],

你可能感兴趣的:(php,php)