layui upload pictures implementation process

layui.user a page can only have one, write more results will be achieved js

Upload pictures official document has a lot of features, but the code is just a demonstration of a functional demonstration, if you want together js code is not a simple patchwork, need to be placed in designated locations, such as the following file size limit.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layui动画测试</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
        <script src="https://www.layuicdn.com/layui/layui.js"></script>

</head>
<body>
    <div style="text-align: center">
        <img data-anim="layui-anim-scaleSpring" class="layui-upload layui-anim" id="id_upload_img"
             src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564555274864&di=f0897dc4a00cccc5f71bdd0d46fe1720&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201608%2F21%2F20160821230024_MyCYK.thumb.700_0.jpeg" style="border-radius: 50%; width: 18%">
        <div class="layui-word-aux">Click to change my picture </ div > 
        < div class = "layui-Word-the AUX" > upload pictures to limit the size 60KB </ div > 
    </ div > 

< Script > 
    layui.use ([ ' the Upload ' ], function () {
             var Layer = layui.layer;
             var $ = layui.jquery 
                , the Upload = layui.upload;
         // ordinary start uploading pictures 
            var uploadInst =  upload.render ({
                elem: ' #id_upload_img ' , 
                URL: ' / User / upload_img / ' , 
                size: 60 , // limit the file size in KB 
                before: function (obj) {
                 // pre exemplary local file read, do not support IE8 
                obj.preview ( function (index, File, Result) { 
                    $ ( ' #id_upload_img ' ) .attr ( ' the src ' , Result); // image_link (Base64) 
                }); 
                },
                DONE: function (RES) {
                     // If the upload has failed 
                    IF (res.status >  0 ) {
                         return layer.msg ( ' failed to upload ' ); 
                    } 
                    // successfully uploaded 
                    } 
                    , error: function () {
                     // Demo failed state , and to achieve a retransmission 
                var demoText = $ ( ' #demoText ' ); 
                demoText.html ( '<span style = "color: # FF5722;"> failed to upload </ span> <a class="layui-btn layui-btn-xs demo-reload"> retry </a> '  );
                demoText.find ( ' .demo -reload ' ) .on ( ' the Click ' , function () { 
                    uploadInst.upload (); 
                    }); 
                    } 
                    }); 
        // common image upload end 
    })
 </ Script > 
</ body > 
</ HTML >

layui upload pictures implementation process

Guess you like