使用layui實(shí)現(xiàn)圖片上傳的功能-創(chuàng)新互聯(lián)

這篇文章主要介紹使用layui實(shí)現(xiàn)圖片上傳的功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比鳳泉網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式鳳泉網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋鳳泉地區(qū)。費(fèi)用合理售后完善，10余年實(shí)體公司更值得信賴(lài)。

用layui實(shí)現(xiàn)圖片上傳的方法：首先打開(kāi)html文件，并引用其中的layui.css和layui.js；然后調(diào)用前端的html代碼，設(shè)置id值；最后通過(guò)“upload.render({...})”方法實(shí)現(xiàn)圖片上傳即可。

layui上傳功能的實(shí)現(xiàn)：

一、前往官網(wǎng)下載layui的框架

打開(kāi)html文件，引用其中的 layui.css 和 layui.js

二、調(diào)用前端的html代碼，設(shè)置id值。

<div class="layui-upload upload">
            <button type="button" class="layui-form-label" id="upload">上傳圖片</button>
            　<input  class="layui-upload-file" type="file" accept="" name="file">
             <div class="layui-upload-list">
                   <img class="layui-upload-img" id="demo1">
                   <p id="demoText"></p>
             </div>
</div>
<script>
    layui.use(['laypage', 'layer', 'upload'], function () {
        var laypage = layui.laypage  //設(shè)置配置環(huán)境
            , layer = layui.layer
            , upload = layui.upload
     
        //上傳圖片
        var uploadInst = upload.render({
            elem: '#upload'
            , url: '/upload/' //改成您自己的上傳接口
            , before: function (obj) {
                //預(yù)讀本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //圖片鏈接（base64）
                });
            }
            , done: function (res) {
                //如果上傳失敗
                if (res.code > 0) {
                    return layer.msg('上傳失敗');
                }
                //上傳成功
            }
            , error: function () {
                //演示失敗狀態(tài)，并實(shí)現(xiàn)重傳
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上傳失敗</span> 
                <a class="layui-btn layui-btn-xs demo-reload">重試</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
 }); 
</script>

以上是“使用layui實(shí)現(xiàn)圖片上傳的功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱(chēng)欄目：使用layui實(shí)現(xiàn)圖片上傳的功能-創(chuàng)新互聯(lián)
文章地址：http://muchs.cn/article44/cosihe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、用戶(hù)體驗(yàn)、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站收錄、面包屑導(dǎo)航、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容