Use of ASP. net mvc asynchronous upload of images and Rich Text editors

These two technologies cannot be used in any website project. They are also widely used. Therefore, I wrote this blog and would like to help you, by the way, let me take my notes to facilitate my future use. I will not talk much about it. Let's talk about uploading images first. I use Asynchronous upload for uploading images, let's talk about the use of Rich Text Editor.

1. upload images

(1) Step 1: Preparation

Because I upload images asynchronously, you must know that we need some preparation work. First, we must add two references to our project. First, we must all know the reference, the second reference is a JS script for Asynchronously uploading images. We need to introduce it. If not, you can download it online or find it in my project,CodeAs follows:

<SCRIPT src = "http://www.cnblogs.com/Scripts/jquery-1.7.1.js"> </SCRIPT>

@ * Implement the asynchronous image upload function *@

<SCRIPT src = "http://www.cnblogs.com/Scripts/MyAjaxForm.js"> </SCRIPT>

(2) Step 2: Set the controls for uploading images and the main HTML code, as shown below:

Note: Have you seen the attributes in the form? Enctype: we must set the following attributes to allow us to upload images. The anction request address is our operation method in the Controller. We will talk about it later, as for other code, you must be clear about it.

(3) Step 3: Send an asynchronous request. When we have prepared these requests, we need to send the asynchronous request to the backend to pass the parameters. The Code is as follows:

Note: In this code, we can see that I have defined a var imgfilename. What is this? As a matter of fact, you will know when you look at the annotations, because I will pass the image path from the background, so this variable is used to save the image path, when we save the image path to this variable, we can see the call method of the image in the following figure.

(4) Step 4: the code in the controller is as follows: This Code is also very simple, that is, it is OK to save the image to the disk and return the image path.

// Uploads images asynchronously.

Public actionresult fileupload ()

{

// Save the uploaded Image

Httppostedfilebase imgfile = request. Files [0];

// Return the image address

Imgfile. saveas (server. mappath ("../Photo/" + imgfile. filename ));

Return content ("/Photo/" + imgfile. filename );

}

(5) Step 5: Note:

Note: When uploading images to a disk, do not create a folder under the views folder to store images.

(6) effect display

2. Use of Rich Text Editor

Note: This is the same as uploading the previous image. If there is any ambiguity, you can give it to me!

(1) Step 1: Prepare for the job. First, download the JS Code and other files from the rich text editor we need online,

I met many people who put the downloaded items in the project, which sometimes caused some functions to be unavailable and found in debugging for most of the time. My suggestion is, when we use other people's things, we first put all the people's things in it, and then when we finish the project, we are slowly deleting those useless things, in this case, I rarely encountered any problems. I don't know how to solve them? Put all rich text editors in our project ,:

Then we introduce the JavaScript code of the Rich Text Editor we need in the project to use it. Note that the path must be correct. The Code is as follows:

@ * Introduce Rich Text Editor *@

<SCRIPT src = "http://www.cnblogs.com/kindeditor-4.1.3/kindeditor.js"> </SCRIPT>

<SCRIPT src = "http://www.cnblogs.com/kindeditor-4.1.3/lang/zh_CN.js"> </SCRIPT>

<SCRIPT src = "http://www.cnblogs.com/kindeditor-4.1.3/plugins/code/prettify.js"> </SCRIPT>

(2) Step 2: write the code of the HTML text box. This is also very simple. You can use the textbox text box directly. The Code is as follows:

<Tr>

<TD> content: </TD>

<TD>

<Textarea id = "txtmaincontent" name = "addnewscontent" style = "width: 550px; Height: 300px; visibility: hidden;" runat = "server">

</Textarea>

</TD>

</Tr>

(4) Step 3: compiling JS scripts

Note: I think I have added comments to all the vague points. If you think it is unclear, leave a message for me and we will study it together.

(5) Step 4: obtain the value of the rich text box and modify the value of the rich text box, however, the rich text editor is used to read the values in the Rich Text Editor and add them to the database or read the values from the database to the rich text editor, next I will give a brief introduction.

// Obtain the content of the add text box

Function geteditoradddata (){

Return editorupdate.html (); // use the HTML code of the window. editoradd method defined above to annotate Han Yinglong

}

// Assign a value to the rich text box

Function seteditorupdatedata (data ){

Editorupdate.html (data); // use the rich text box: window. editorupdate Han Yinglong comment

}

How can we use it when we use it? Txtmaincontent: geteditoradddata (); you only need to pass this method to asynchronous parameters to obtain the value of the text box. For detailed code, refer to my code.

(6) Step 5: Display Results

1) Add results

2) modify the effect

So far: the Image Upload and Rich Text Editor functions have been completed. If you have any questions or do not understand anything, you can go to our blog site group "Youth Code". The website is: success! We hope that you can support our blog community group and build a paradise for communication technology.

Project: http://download.csdn.net/detail/hanyinglong/4789850