资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Laravel 5.1 Ajax上传图片方法

Laravel 5.1 Ajax上传图片方法

Scholer / 522人阅读

摘要：最近在做的项目基于开发，需要用到上传，查了些资料，自己整理了下可用的方法。

最近在做的项目基于Laravel 5.1开发，需要用到Ajax上传，查了些资料，自己整理了下可用的方法。

控制器：

UploadController.php

getClientOriginalExtension() && !in_array($file->getClientOriginalExtension(), $allowed_extensions)) {
            return ["error" => "You may only upload png, jpg or gif."];
        }

        $destinationPath = "uploads/images/";
        $extension = $file->getClientOriginalExtension();
        $fileName = str_random(10).".".$extension;
        $file->move($destinationPath, $fileName);
        return Response::json(
            [
                "success" => true,
                "pic" => asset($destinationPath.$fileName),
                "id" => $id
            ]
        );
    }
}
模板：

upload_img.blade.php








    

        上传图片
        关闭
    

    

        

        {!! Form::open( array("url" =>["/admin/upload_img"], "method" => "post", "id"=>"imgForm", "files"=>true) ) !!}
        

            
            (*)
            
            

        

        {!!Form::close()!!}
CSS : 
.thumb-wrap{
    overflow: hidden;
}
.thumb-wrap img{
    margin-top: 10px;
}
.pic-upload{
    width: 100%;
    height: 34px;
    margin-bottom: 10px;
}
#thumb-show{
    max-width: 100%;
    max-height: 300px;
}
.upload-mask{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
    z-index: 1000;
}
.upload-file .close{
    cursor: pointer;
    font-size: 14px;
}

.upload-file{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -105px;
    margin-left: -150px;
    max-width: 300px;
    z-index: 1001;
    display: none;
}

.upload-mask{
    display: none;
}
JS：

需要jQuery库 和jQuery.form.js

$(function(){
    //上传图片相关

    $(".upload-mask").on("click",function(){
        $(this).hide();
        $(".upload-file").hide();
    })

    $(".upload-file .close").on("click",function(){
        $(".upload-mask").hide();
        $(".upload-file").hide();
    })

    var imgSrc = $(".pic-upload").next().attr("src");
    console.log(imgSrc);
    if(imgSrc == ""){
        $(".pic-upload").next().css("display","none");
    }
    $(".pic-upload").on("click",function(){
        $(".upload-mask").show();
        $(".upload-file").show();
        console.log($(this).next().attr("id"));
        var imgID = $(this).next().attr("id");
        $("#imgID").attr("value",imgID);
    })


    //ajax 上传
    $(document).ready(function() {
        var options = {
            beforeSubmit:  showRequest,
            success:       showResponse,
            dataType: "json"
        };
        $("#imgForm input[name=file]").on("change", function(){
            //$("#upload-avatar").html("正在上传...");
            $("#imgForm").ajaxForm(options).submit();
        });
    });

    function showRequest() {
        $("#validation-errors").hide().empty();
        $("#output").css("display","none");
        return true;
    }

    function showResponse(response)  {
        if(response.success == false)
        {
            var responseErrors = response.errors;
            $.each(responseErrors, function(index, value)
            {
                if (value.length != 0)
                {
                    $("#validation-errors").append("
"+ value +"
");
                }
            });
            $("#validation-errors").show();
        } else {

            $(".upload-mask").hide();
            $(".upload-file").hide();
            $(".pic-upload").next().css("display","block");

            console.log(response.pic);

            $("#"+response.id).attr("src",response.pic);
            $("#"+response.id).next().attr("value",response.pic);
        }
    }

})
路由： 
//图片上传
Route::post("upload_img","UploadController@imgUpload");

现在需要在模板中include 上传图片模板

(我的放在admin目录下的common目录下，根据自己放的位置更改)

@include("admin.common.upload_img")

现在我在create.blade.php中使用


    
   

   
点击上传

效果如下图：

1.未上传状态

2.点击上传

3.上传完成

有问题可以在下面留言

原文地址：Laravel 5.1 Ajax上传图片方法

云服务器 GPU云服务器 ajax上传图片 php图片上传方法 php图片上传的方法 Ajax方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/21156.html

相关文章

  • 在Laravel项目中实现Ajax上传用户头像

    摘要：在编写程序的过程中，经常会遇到一个经典的文件上传场景上传头像图片。基于对最好的用户体验的追求，写一下之前在项目中实现在项目中的上传头像。 在编写web程序的过程中，经常会遇到一个经典的文件上传场景：上传头像（图片）。基于对最好的用户体验的追求，写一下之前在项目中实现在Laravel项目中的Ajax上传头像。 1.配置路由 在Laravel的routes.php中设置路由： Rou...

    shiina 评论0 收藏0

  • Laravel5 Markdown 编辑器使用教程

    摘要：编辑器使用教程月号发布的这个扩展，好多朋友使用起来有一些问题，好吧，都怪我安装使用说明写的不清楚今天给大家补一篇详细的安装说明文档项目地址求求求求求此处省略一万字功能图片上传语法解析为编辑器该有的功能都有还有谁还有谁预览安装在的里面加 laravel 5 Markdown 编辑器使用教程 5月18号发布的这个扩展，好多朋友使用起来有一些问题，好吧，都怪我安装使用说明写的不清楚└(^o...

    qylost 评论0 收藏0

  • Laravel 框架引入 markdown 编辑器

    摘要：我们来使用下依旧是头部引入首先，在类头部，添加引用然后，调用我们的方法就行啦直接把需要转换的做为参数传递进去我是语法结果为我是语法 引入 markdown 编辑器packages 1.首先在 composer.json 的 require 里面加入以下内容 yuanchao/laravel-5-markdown-editor: dev-master 2.添加完成后，执行 compos...

    PascalXie 评论0 收藏0

  • Laravel中前端js上传图片到七牛云

    摘要：以下中使用浏览器端上传图片到七牛云，下面只是做一些简单的流程实例。你的控制器地址请求成功之后，调用刚刚写好的方法，把传入过去让页面初始化的时候就请求这里差不多就可以啦，更多的操作参考文档七牛云官方文档 以下Laravel中使用浏览器端上传图片到七牛云，下面只是做一些简单的流程实例。详情请看官方文档七牛云官方js文档 1. 首先引入相应的js文件，下面是通过CDN引入的Staticfi...

    jollywing 评论0 收藏0

  • Laravel中前端js上传图片到七牛云

    摘要：以下中使用浏览器端上传图片到七牛云，下面只是做一些简单的流程实例。你的控制器地址请求成功之后，调用刚刚写好的方法，把传入过去让页面初始化的时候就请求这里差不多就可以啦，更多的操作参考文档七牛云官方文档 以下Laravel中使用浏览器端上传图片到七牛云，下面只是做一些简单的流程实例。详情请看官方文档七牛云官方js文档 1. 首先引入相应的js文件，下面是通过CDN引入的Staticfi...

    EscapedDog 评论0 收藏0

发表评论

登陆后可评论

0条评论

Scholer

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<