Home >Web Front-end >Layui Tutorial >How to use layui to upload images

How to use layui to upload images

藏色散人
藏色散人Original
2020-12-04 09:54:124915browse

How to use layui to upload images: first open the html file and reference layui.css and layui.js; then call the front-end html code and set the id value; finally pass "upload.render({ ...})" method to upload images.

How to use layui to upload images

The operating environment of this tutorial: Windows 7 system, layui version 2.4. This method is suitable for all brands of computers.

Recommended: "javascript basic tutorial" "layUI tutorial"

Implementation of layui upload function:

1. Go to the official website to download the layui framework

Open the html file and reference layui.css and layui.js

2. Call the front-end html code and set the id value.

<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([&#39;laypage&#39;, &#39;layer&#39;, &#39;upload&#39;], function () {
        var laypage = layui.laypage  //设置配置环境
            , layer = layui.layer
            , upload = layui.upload
     
        //上传图片
        var uploadInst = upload.render({
            elem: &#39;#upload&#39;
            , url: &#39;/upload/&#39; //改成您自己的上传接口
            , before: function (obj) {
                //预读本地文件示例,不支持ie8
                obj.preview(function (index, file, result) {
                    $(&#39;#demo1&#39;).attr(&#39;src&#39;, result); //图片链接(base64)
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg(&#39;上传失败&#39;);
                }
                //上传成功
            }
            , error: function () {
                //演示失败状态,并实现重传
                var demoText = $(&#39;#demoText&#39;);
                demoText.html(&#39;<span style="color: #FF5722;">上传失败</span> 
                <a class="layui-btn layui-btn-xs demo-reload">重试</a>&#39;);
                demoText.find(&#39;.demo-reload&#39;).on(&#39;click&#39;, function () {
                    uploadInst.upload();
                });
            }
        });
 }); 
</script>

The above is the detailed content of How to use layui to upload images. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn