The WEB Version selects multiple images for batch upload (WebUploader) at a time,

The WEB Version selects multiple images for batch upload (WebUploader) at a time,

I recently learned About Baidu's open-source Upload Component WebUploader. in the previous article, I learned how to upload files in batches. Today I learned how to upload images in batches. It is actually similar to uploading files, but I added the image display function, this feature is already available in the WebUploader component.

1. The WebUploader component allows the customer to select multiple files at a time, and then upload the selected files to the server's batch file solution.

Let's take a look at the client interface. (Multiple files, batch upload, and upload progress display)

1) display interface:

Figure 1

2) Select multiple files:

 

Figure 2

Note: compared with the solution of selecting multiple files for batch upload (WebUploader) in the WEB version of the previous article, we can see that only images are displayed this time, the compressed and executable files are not displayed.

 

3) Upload progress display

 

Figure 3

 

Figure 4

Note: by default, WebUploader is used to concurrently upload files in three threads. If you want to increase the number of concurrent threads or reduce the number of concurrent threads. You can modify the threads attribute, which is the maximum number of concurrent uploads allowed.

 

3) Upload successful display

Figure 5

II. Specific Code and operation steps:

Step 1: Prepare the WebUploader component before proceeding to the following process.
1) WebUploader: You can visit the official website WebUploader: elastic.

Step 2: Create the directory structure of the application.
1. Main directory structure

 

2. js script files and css files used for file upload.

Step 3: Prepare the WEB interface for customer operations in the foreground, as shown in [WebUploaderFileByBaidu. aspx, UploaderFileByBaidu. ashx]

1) Front-end client code. The WebUploaderFileByBaidu. aspx code is as follows. Only the default code is used in the WebUploaderFileByBaidu. aspx. cs file, and no code is added.
WebUploaderFileByBaidu. aspx
Html code

 

<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "WebUploaderFileByBaidu. aspx. cs" Inherits = "WebApplication1.WebUploaderFileByBaidu" %> <! DOCTYPE html> 
 

The final display result of the above Code is as follows:
 
Figure 8.

2) the backend server code is the same as the code of the UploaderFileByBaidu. ashx. cs file in the previous article (WebUploader solution.
Step 4: The file helper class is the same as the code in the previous article (WebUploader solution for selecting multiple files at a time.
Step 5: After the upload, the file is saved in the corresponding date directory. For example.

Figure 9