thinkPHP利用ajax異步上傳圖片并顯示、刪除

LucasTwilight 發布于2019-07-01 10:45 / 2889人閱讀

摘要：近來學習的過程中，項目中有個發帖功能，選擇主題圖片。如下利用原始的文件上傳處理，雖然通過原始語句能實時顯示上傳圖片，但是這樣的話會涉及很多兼容問題。使用技術，實現選擇性刪除所選圖片功能，并不會有兼容問題。

近來學習tp5的過程中，項目中有個發帖功能，選擇主題圖片。如下：

利用原始的文件上傳處理，雖然通過原始js語句能實時顯示上傳圖片，但是這樣的話會涉及很多兼容問題。使用ajax技術，實現選擇性刪除所選圖片功能，并不會有兼容問題。

表單文件form：



    主題圖片:
    
    
        圖片上傳

需要發送Ajax請求的話，當然表單是不能實現我們的需求的，因此，我們需要給表單關聯一個單擊事件去幫我們進行Ajax請求并選擇圖片。
當我們點擊上傳圖片這個button按鈕時觸發選擇圖片實現Ajax上傳

JavaScript代碼：

點擊選擇圖片之后就是交給服務器端處理了。
php接口文件：

    public function upimg()
    {
        //驗證
        $file = request()->file("img");
        // 移動到框架應用根目錄/public/uploads/ 目錄下
        if($file){
            $info = $file->move(ROOT_PATH . "public" . DS . "uploads");
            if($info){
                // 成功上傳后 獲取上傳信息
                $img_src = "/uploads/".$info->getSaveName();
                echo $img_src; //返回ajax請求
            }else{
                // 上傳失敗獲取錯誤信息
                $this->error($file->getError());
            }
        }
    }

改善后的效果圖：

GPU云服務器云服務器 js顯示并刪除json數據圖片上傳服務器并預覽 ajax上傳圖片圖片一直顯示圖片上傳中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/29429.html

php圖片處理之本地圖片轉base64格式上傳

摘要：文章首發于藍鍋鍋博客主要是用到的接口，既然是的，所支持的瀏覽器我就不多說啦，老生常談的問題了，遠離，珍惜生命。目錄路徑為目錄路徑為文章首發于藍鍋鍋博客，歡迎交流，共同進步。我們在開發系統時，處理圖片上傳是不可避免的，例如使用thinkphp的肯定很熟悉import(@.ORG.UploadFile);的上傳方式，今天我們來講一個使用html5 base64上傳圖片的方法。文章首發于藍...

levy9527 2019-06-27 14:44 評論0 收藏0
php圖片處理之本地圖片轉base64格式上傳

摘要：文章首發于藍鍋鍋博客主要是用到的接口，既然是的，所支持的瀏覽器我就不多說啦，老生常談的問題了，遠離，珍惜生命。目錄路徑為目錄路徑為文章首發于藍鍋鍋博客，歡迎交流，共同進步。我們在開發系統時，處理圖片上傳是不可避免的，例如使用thinkphp的肯定很熟悉import(@.ORG.UploadFile);的上傳方式，今天我們來講一個使用html5 base64上傳圖片的方法。文章首發于藍...

isaced 2019-08-20 11:56 評論0 收藏0
thinkphp ajaxfileupload 異步上傳圖片

摘要：開發圖片上傳，圖片異步上傳是目前比較方便的功能這里我就不寫文件了，將代碼寫出來。 thinkphp開發圖片上傳，圖片異步上傳是目前比較方便的功能,這里我就不寫css文件了，將代碼寫出來。引入核心文件下載https://github.com/carlcarl/A...HTML下面首先在html頁面引入相關js資源圖片上傳接下來在body中創建相關div 封...

learn_shifeng 2019-06-28 13:35 評論0 收藏0
thinkphp ajaxfileupload 異步上傳圖片

摘要：開發圖片上傳，圖片異步上傳是目前比較方便的功能這里我就不寫文件了，將代碼寫出來。 thinkphp開發圖片上傳，圖片異步上傳是目前比較方便的功能,這里我就不寫css文件了，將代碼寫出來。引入核心文件下載https://github.com/carlcarl/A...HTML下面首先在html頁面引入相關js資源圖片上傳接下來在body中創建相關div 封...

SKYZACK 2019-08-20 18:58 評論0 收藏0