How to get the file name in layui's file upload function

The first step is to open the software on our computer, create a new html page, and add the css, js file and jquery.js file of the layui plug-in, as shown below:

The second step is to first introduce the three files layui.css, layui.js, and jquery-1.9.0.js into the newly created index1.html file, as shown in the figure below ：

The third step is to add a table, file selection and file upload buttons in the body of index1.html to upload the file to the server in the form of a table Display to the interface, display the file name, file size, etc., as shown below:

The fourth step is to open the page in the browser and you can see the file upload list. The interface effect is as shown below:

Related recommendations: "layui framework tutorial"

The fifth step is to start giving files Add events to the select button and upload button, and return the uploaded file information to the table. Use the obj.preview(function(index, file, result){}); method to read the selected local file information and obtain file.name File name, (file.size/1014).toFixed(1) gets the file size, as shown in the figure below:

Step 6 Click the upload file button to upload the selected one After the file is successfully uploaded, the file upload information, including file name, file size, etc., is obtained through the var tr=demoListView.find('tr#upload-' index), tds =tr.children(); code and inserted into the table. As shown in the picture below:

The seventh step is to open the index1.html file in the browser. You can see the interface style for uploading multiple files. Click to select multiple files, as shown below. As shown:

In the eighth step, we select the local file to upload and click to open, as shown in the figure below:

In the ninth step, you can see that the file has been successfully uploaded to the server, and the file name and file size are obtained and displayed in the table, as shown in the following figure:

The above is the detailed content of How to get the file name in layui's file upload function. For more information, please follow other related articles on the PHP Chinese website!