成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Laravel 5.1 Ajax上傳圖片方法

Scholer / 553人閱讀

摘要：最近在做的項(xiàng)目基于開發(fā)，需要用到上傳，查了些資料，自己整理了下可用的方法。

最近在做的項(xiàng)目基于Laravel 5.1開發(fā)，需要用到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








    

        上傳圖片
        關(guān)閉
    

    

        

        {!! 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(){
    //上傳圖片相關(guān)

    $(".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");

現(xiàn)在需要在模板中include 上傳圖片模板

(我的放在admin目錄下的common目錄下，根據(jù)自己放的位置更改)

@include("admin.common.upload_img")

現(xiàn)在我在create.blade.php中使用


    
   

   
點(diǎn)擊上傳

效果如下圖：

1.未上傳狀態(tài)

2.點(diǎn)擊上傳

3.上傳完成

有問題可以在下面留言

原文地址：Laravel 5.1 Ajax上傳圖片方法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/21156.html

相關(guān)文章

  • 在Laravel項(xiàng)目中實(shí)現(xiàn)Ajax上傳用戶頭像

    摘要：在編寫程序的過程中，經(jīng)常會遇到一個經(jīng)典的文件上傳場景上傳頭像圖片。基于對最好的用戶體驗(yàn)的追求，寫一下之前在項(xiàng)目中實(shí)現(xiàn)在項(xiàng)目中的上傳頭像。 在編寫web程序的過程中，經(jīng)常會遇到一個經(jīng)典的文件上傳場景：上傳頭像（圖片）?；趯ψ詈玫挠脩趔w驗(yàn)的追求，寫一下之前在項(xiàng)目中實(shí)現(xiàn)在Laravel項(xiàng)目中的Ajax上傳頭像。 1.配置路由 在Laravel的routes.php中設(shè)置路由： Rou...

    shiina 評論0 收藏0

  • Laravel5 Markdown 編輯器使用教程

    摘要：編輯器使用教程月號發(fā)布的這個擴(kuò)展，好多朋友使用起來有一些問題，好吧，都怪我安裝使用說明寫的不清楚今天給大家補(bǔ)一篇詳細(xì)的安裝說明文檔項(xiàng)目地址求求求求求此處省略一萬字功能圖片上傳語法解析為編輯器該有的功能都有還有誰還有誰預(yù)覽安裝在的里面加 laravel 5 Markdown 編輯器使用教程 5月18號發(fā)布的這個擴(kuò)展，好多朋友使用起來有一些問題，好吧，都怪我安裝使用說明寫的不清楚└(^o...

    qylost 評論0 收藏0

  • Laravel 框架引入 markdown 編輯器

    摘要：我們來使用下依舊是頭部引入首先，在類頭部，添加引用然后，調(diào)用我們的方法就行啦直接把需要轉(zhuǎn)換的做為參數(shù)傳遞進(jìn)去我是語法結(jié)果為我是語法 引入 markdown 編輯器packages 1.首先在 composer.json 的 require 里面加入以下內(nèi)容 yuanchao/laravel-5-markdown-editor: dev-master 2.添加完成后，執(zhí)行 compos...

    PascalXie 評論0 收藏0

  • Laravel中前端js上傳圖片到七牛云

    摘要：以下中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡單的流程實(shí)例。你的控制器地址請求成功之后，調(diào)用剛剛寫好的方法，把傳入過去讓頁面初始化的時候就請求這里差不多就可以啦，更多的操作參考文檔七牛云官方文檔 以下Laravel中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡單的流程實(shí)例。詳情請看官方文檔七牛云官方j(luò)s文檔 1. 首先引入相應(yīng)的js文件，下面是通過CDN引入的Staticfi...

    jollywing 評論0 收藏0

  • Laravel中前端js上傳圖片到七牛云

    摘要：以下中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡單的流程實(shí)例。你的控制器地址請求成功之后，調(diào)用剛剛寫好的方法，把傳入過去讓頁面初始化的時候就請求這里差不多就可以啦，更多的操作參考文檔七牛云官方文檔 以下Laravel中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡單的流程實(shí)例。詳情請看官方文檔七牛云官方j(luò)s文檔 1. 首先引入相應(yīng)的js文件，下面是通過CDN引入的Staticfi...

    EscapedDog 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<