tp5使用layui非同步上傳圖片

阿新 • • 發佈：2019-01-07

上傳檔案任何地方都要用到，這篇文章介紹使用layui非同步上傳圖片。

1.檢視程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上傳外掛</title>
    <link href="/static/layui/css/layui.css" rel="stylesheet">
</head>
<body>

    <div class="layui-upload" 
>
        <button type="button" class="layui-btn" id="cover">上傳封面</button>
    </div>
    <div class="layui-input-inline">
        <img id="preview" width="200px" height="200px">
    </div>

<script src="/static/layui/layui.js"></script>
<script>
    layui. 
use('upload', function() {
        var upload = layui.upload;
        var $ = layui.jquery;
        var uploadInst = upload.render({
            elem:'#cover'
            ,url:'doUpload'
            ,accept:'file'  // 允許上傳的檔案型別
            ,auto:true // 自動上傳
            ,before:function (obj) {
                console. 
log(obj);
                // 預覽
                obj.preview(function(index,file,result) {
                    // console.log(file.name);    //圖片名字
                    // console.log(file.type);    //圖片格式
                    // console.log(file.size);    //圖片大小
                    // console.log(result);       //圖片地址
                    $('#preview').attr('src',result); //圖片連結 base64
                });
                // layer.load();
            }
            // 上傳成功回撥
            ,done:function(res) {
                // console.log(upload);
                // console.log(res);
                if (res.code == 0) {
                    return layer.msg(res.msg);
                }
                return layer.msg(res.msg);
            }
            // 上傳失敗回撥
            ,error:function(index,upload) {
                return layer.msg(res.msg);
            }

        });
    });
</script>
</body>
</html>

2.控制器程式碼

   // 顯示上傳頁面
    public function upload()
    {
        return view();
    }
    
    //開始上傳
    public function doUpload()
    {
        $img = request()->file('file');
        // 移動到框架應用根目錄/public/uploads/ 目錄下
        $info = $img->move(ROOT_PATH . 'public' . DS . 'layer_uploads');
        if($info){
            // 成功上傳後 獲取上傳資訊
            return json(['code' => 0, 'msg' => '上傳成功!', 'url' => '/layer_uploads/' . $info->getSaveName()]);
        }else{
            // 上傳失敗獲取錯誤資訊
            return json(['code' => 1, 'msg' => $img->getError(), 'url' => '']);
        }

    }

最好效果就是這樣:
在這裡插入圖片描述

ajaxFileUpload 非同步上傳圖片使用說明

首先引入相應的jquery <script src="script/jquery-1.7.1.min.js"></script> <script src="script/ajaxfileupload.js"></script>

js 實現非同步上傳圖片+預覽

兩種js實現方式，一種用原生的ajax；另一種用JQuery，例子比較簡單，直接上程式碼。 <!DOCTYPE html> <html> <head> <title>Title</title> <link h

thinkPHP利用ajax非同步上傳圖片並顯示、刪除

近來學習tp5的過程中，專案中有個發帖功能，選擇主題圖片。如下：利用原始的檔案上傳處理，雖然通過原始js語句能實時顯示上傳圖片，但是這樣的話會涉及很多相容問題。使用ajax技術，實現選擇性刪除所選圖片功能，並不會有相容問題。表單檔案form： <form method="po

使用jsJdk非同步上傳圖片至OSS伺服器

阿里雲官方文件中給的基本都是同步上傳檔案的DEMO，可能是非同步的比較簡單，但是由於自己JS基礎還不夠牢固，在學習使用的時候也很鬧心，因為老是看著看著就看到非同步的那邊去了。將自己寫好的的一個DEMO放於部落格中，萬一能夠幫助到任何一個和我一樣的朋友也是好的。 <!DOCTYPE html&

AJAX非同步上傳圖片(TP5)

php程式碼： /** * 上傳 */ public function upload_photo(){ $file = $this->request->file('file'); $uid = se

ajax實現非同步上傳圖片

圖片上傳並回顯是一個最基本的功能，本文只簡單實現了一個demo,並沒有進行復雜的判斷，簡單記錄下操作流程：js中用到了Formdata：FormData物件用以將資料編譯成鍵值對，以便用XMLHttpRequest來發送資料。其主要用於傳送表單資料，但亦可用於傳送帶鍵資料(keyed data)。如果表單en

tp5非同步上傳圖片到七牛雲，就是那麼簡單

1. 一個非同步上傳的外掛uploadify 在html中引入uploadify的js和css檔案。 tp5中如 html如下: javascript呼叫程式碼如下: 2.用七牛雲端儲存圖片封裝對於qiniu類庫的下載，一是通過com

Ajax（使用 jQuery，php）非同步上傳圖片（二進位制流）儲存到新浪雲平臺storage

這兩天實現了一個釋出圖片的功能，可謂是一波三折，bug不斷啊，趁剛搞定，趕緊把過程寫下來，順便把程式碼傳過來。記錄了圖片在本地的儲存和將本地的圖片以二進位制流提交到後臺php檔案在html檔案中的操作自然就是在表單form元素中新增屬性 enctype="multi

TP 5 上傳圖片回顯（AJAX非同步上傳圖片TP5)

直接上程式碼 PHP程式碼如下 /** * 上傳 */ public function upload_photo(){ $file = $this

tp5使用layui非同步上傳圖片

上傳檔案任何地方都要用到，這篇文章介紹使用layui非同步上傳圖片。 1.檢視程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

thinkphp+ajaxfileupload 非同步上傳圖片

藉助外掛實現非同步上傳圖片的，需要引用Jquery。 HTML： <a onclick="selectImg(this)">照片</a> <input type="file" id="file{$voc.id}" name="file{$vo

利用formdata非同步上傳圖片並預覽圖片

<img src="" style="width: 120px;margin-bottom: 5px" id="previewimg0"> <form action="" enctype="multipart/form-data" id="form0"> <input

ajax非同步上傳圖片程式碼案例

html程式碼如下： <div class="form-group" style="width:60%;"> <table class="table"> <thead>

uploadify結合ThinkPHP5上傳類實現非同步上傳圖片

注：我們使用的是免費的Flash版本①引入必需的檔案jQueryjquery.uploadify-3.1.min.jsuploadify.css②HTML元素的搭建（結合bootstrap）<div class="form-group"> <labe

非同步上傳圖片-ajaxSubmit提交

非同步上傳是一個很蛋疼的問題，今天就來說說非同步上傳的故事第一步引入ajaxSubmit這個js外掛  <script src="__PUBLIC__/js/jquery.ajaxSubmit.js">&l

spring mvc+ajaxfileupload 實現非同步上傳圖片

1.匯入包引入js 匯入spring包以及如下包 <dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><ve

移動web非同步上傳圖片

ajax-upload-image.mobile 簡介進行移動web開發時，圖片上傳功能基本都會使用到。實現雖然說難度不大，但自己還是會遇到很多小坑。寫了一個demo（可正常使用，demo只有

MVC非同步上傳圖片

今天聽黑馬訓練營就業班的MVC課程，馬老師在非同步上傳圖片這裡卡住了半天，多次除錯都無法在後臺控制器獲得圖片。下面直接寫出MVC中檔案上傳方法。 1.控制器 public ActionResult

SpringMVC+ajaxFileUpload 相容IE瀏覽器實現非同步上傳圖片

第一次出差到深圳，幫朋友給一個專案收尾，客戶臨時要求上傳檔案的時候順便上傳封面，所以就想到用非同步上傳的方式，然後在前端預覽上傳的圖片，於是就用到了“ajaxFileUpload”這一款基於“jquery”的上傳外掛，剛拿到手的時候去網上查了一下他的用法，然後理所當然的在返

使用ajaxSubmit非同步上傳圖片並展示

頁面在選擇圖片完成後將圖片上傳到圖片伺服器，並在頁面顯示圖片，然後將上傳圖片的路徑載入到隱藏域中，提交表單時將路徑儲存到資料庫。頁面程式碼： <script> function sub

tp5使用layui非同步上傳圖片

相關推薦