ASP. Net Baidu ueditor editor to upload pictures and add watermark effect



A requirement encountered in recent work is to realize ASP Net Baidu ueditor image upload and add watermark function, which is finally realized by finding relevant materials. Let’s share the effect. At the end of the paper, we give the example code, you can refer to and learn. Let’s learn together.

design sketch

First, let’s take a look at the functional interface we want. If you find that this effect is not what you want, you don’t need to see the following content.


Ueditor1 is the ueditor compressed package downloaded from the official website_ 4_ 3-utf8-net. The following introduction is for this version.

Modify interface

First find the place where we want to add “watermark [checkbox]”


From this, we can know that we should go to image HTML this file to modify our HTML code in image Add a few lines of HTML code from line 36 of the HTML file, as shown in the following figure:

Refresh the interface, click multi image upload > local upload, and the interface will be like this:

Find a feasible way

Open firebug and select the console. Let’s upload a picture and see the request information:

As you can see here, the image is uploaded by the controller Ashx, and there are requested parameters: action and encode. Let’s take another look at controller How is ashx handled

The value of the action parameter passed from the foreground is uploadimage. The class action is instantiated by the derived class uploadhandler, which injects an instance of the uploadconfig class through the constructor. Finally, theaction.Process()Call:

amongFile.WriteAllBytesThis is the way to save the picture.

The above is the main processing code of “local upload” in image upload. Now think about it. What should we do if we want to add watermark to the picture?

Someone responded quickly: we can request the controller from the front desk Ashx will transfer the “string” with whether to add watermark to the background, and the background can make corresponding processing through judgment!


1. Find the request controller first Where are the parameters added in ashx? Students with good JS foundation should not be difficult to find:

We add a parameter to him: “add watermark or not”

2. Obtain parameters in the background and judge whether to add watermark

Well, that’s it~

Upload a picture to see:


The details of watermark image processing can be viewed in this article:

Sample download:click here


Well, the above is about ASP Net ueditor has uploaded all the contents of the picture and added the watermark. I hope the content of this article can bring some help to your study or work. If you have any questions, you can leave a message. Thank you for your support for developpaer.