Layui implement file or picture upload record

The first is Layui's own official website about image/File Upload Help document: https://www.layui.com/doc/modules/upload.html

Next is my own usage record:

1. First define a global variable in JS

var uploadlistins;

2. Assign a value

Multiple file List example/** * image upload */layui.use (' Upload ', function () {var $ = Layui.jquery,upload = Layui.upload;    var Demolistview = $ (' #proImageList ');        Uploadlistins = Upload.render ({elem: ' #chooseFile ',//Select the file's button URL: ' upload!ftp.action ',//spool file method for long passing             data:{' serviceName ': ' External order supplier Upload Inspection report ', ' tableName ': ' T_outsource_order ', ' fileType ': ' Picture '}, accept: ' File ',                Multiple:true,//whether to allow multiple file uploads acceptmime: ' image/* ',//rules when opening a file selection box, filter out the File Type field: ' Upload ', Auto:false, bindaction: ' #upload ',//is used to trigger the upload of the button ID choose:function (obj) {///Select the file after the callback function, in this case we will select Optional file to display var files = This.files = Obj.pushfile (); Append each selected file to the file queue//read local file Obj.preview (function (index, file, result) {var tr = $ ([' &L T;tr id= "upload-" + index + ' > ', ' <td> ' + file.name + ' </td> ', ' &LT;TD&G t; '            + (file.size/1014). toFixed (1) + ' kb</td> '        , ' <td> wait for upload </td> ', ' <td> ', ' <button class= ' layui-btn lay Ui-btn-xs demo-reload layui-hide "> Retransmission </button>", ' <button class= ' layui-btn layui-btn-xs Layu I-btn-danger demo-delete "> Delete </button>", ' </td> ', ' </tr> '].join (                ‘‘));                Single retransmission Tr.find ('. Demo-reload '). On (' click ', Function () {obj.upload (index, file);                });                    Delete Tr.find ('. Demo-delete '). On (' click ', function () {delete Files[index];//delete the corresponding file                    Tr.remove (); UploadListIns.config.elem.next () [0].value = ';                Empty the input file value, so that files with the same name cannot be selected after deletion);            Demolistview.append (TR);        }); }, Done:function (res, index, upload) {//Multiple file uploads, this callback function is triggered whenever a file is uploaded successfully console.inf     O (res);       if (Res.status = = "Success") {//upload successful var tr = demolistview.find (' tr#upload-' + index)                , TDS = Tr.children (); Tds.eq (2). html (' <span style= ' color: #5FB878; "                > Upload Success </span> '); Tds.eq (3). html (' <a href= "' +res.url+ '" > View </a> '); Empty operation return Delete This.files[index];            Deleting a file queue has uploaded a successful file}else{alert (res.message);        } this.error (index, upload); }, Alldone:function (obj) {//When the file is all committed, the IF (Obj.total > Obj.successful) {layer.msg ("            File upload failed, do not update production progress, please retry or contact the Administrator ");            }else {//Update production Progress Updateproductionschedule (CurrentID, currentschedule);                }}, Error:function (index, upload) {var tr = demolistview.find (' tr#upload-' + index)            , TDS = Tr.children (); Tds.eq (2). html (' <span style= ' color: #FF5722; " > Upload failed </span> ');           Tds.eq (3). Find ('. Demo-reload '). Removeclass (' layui-hide ');    Display retransmission}); $ (". Layui-upload-file"). Hide ();});

　　

The above JS code appears in the relevant HTML elements as follows, related to the introduction of JS files and CSS: Bootstrap3 js and CSS and Layui js file can be

<!--modal frame (Modal)--><div class= "Modal fade" id= "Uploadmodal" tabindex= "-1" role= "dialog" aria-labelledby= "            Mymodallabel "aria-hidden=" true "> <div class=" Modal-dialog "> <div class=" modal-content "> <div class= "Modal-header" > <button type= "button" class= "Close" data-dismiss= "modal" Aria-hidden = "true" >x</button> 
　　
3. The variables defined in 1 can be dynamically assigned when the modal box is opened, and these variables will be uploaded to the background as appropriate:
function Showuploadmodal (ID) {    //dynamic assignment    uploadListIns.config.data.tableRecordId = ID;    UploadListIns.config.data.filenamePrefix = id+ ". Self-test pass.";    $ ("#uploadModal"). Modal ("Show");}
4. The final front-end implementation is as follows:
Layui implement file or picture upload record