<fieldset id="okkw2"></fieldset>

<strike id="okkw2"></strike>

<del id="okkw2"></del>

Laravel 5.1 Ajax上傳圖片方法

Scholer 發(fā)布于2019-06-27 11:36 / 549人閱讀

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

最近在做的項目基于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





    
        上傳圖片
        關閉
    
    
        
        {!! 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");

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

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

@include("admin.common.upload_img")

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


    縮略圖
   
   點擊上傳

效果如下圖：

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

2.點擊上傳

3.上傳完成

有問題可以在下面留言

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

GPU云服務器云服務器 ajax上傳圖片 php圖片上傳方法 php圖片上傳的方法 Ajax方法

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

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

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

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

shiina 2019-06-27 11:20 評論0 收藏0
Laravel5 Markdown 編輯器使用教程

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

qylost 2019-07-01 12:12 評論0 收藏0
Laravel 框架引入 markdown 編輯器

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

PascalXie 2019-07-01 12:35 評論0 收藏0
Laravel中前端js上傳圖片到七牛云

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

jollywing 2019-08-20 19:08 評論0 收藏0
Laravel中前端js上傳圖片到七牛云

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

EscapedDog 2019-06-28 13:39 評論0 收藏0