Simditor upload Image (Asp.net+js/jquery)

Simditor is my favorite rich text editor, he is relatively concise, configuration is very simple, Simditor official website has, not much to say. However, his picture upload pictures did not respond, Baidu a bit, are the Java version of the simditor image upload. Look at the next change. NET also do not know to use, simply write one yourself. How do you write that?

1. First in accordance with the official website configuration

Rich Text Editor configuration        var editor = new Simditor ({            textarea: $ (' #<%=tb_content.clientid%> '),            upload: {                URL : '.. /upload/notice/',//File Upload interface address                params:null,//Key value pairs, specify additional parameters for the file upload interface, upload with the file submitted                filekey: ' Filedatafilename ',/ /server-side get file data parameter name                connectioncount:3,                leaveconfirm: ' Uploading file '            },            defaultimage: '. /images/user_photo_max.png ',//editor default image used when inserting pictures        });

At this time, click Upload Image will appear the following screen

And then there's no more ... What about that? Look down.

2. Press F12 to view the source code for the "local pictures" and "outside the chain pictures"

Add class= "up-img" to the upload control for "upload locally" and add Class link-img for the outer chain picture. Here's someone to ask, how to add? and look down.

3. Find simditor.js File Open, "local picture" Ctrl+f5 Find accept= "image/*", note that a total of two, the first one is "local picture", the second is "picture of the Chain", other label lookup and so on, find and then add the class name.

For the "Outside chain picture" This sentence he commented, and then will pop up the selection of the image interface, we want to transform it into a text box inside the link image to add to the rich Text editor.

Well, when we get ready for the job, we're done, and then we'll get a good idea. We want the file to be automatically uploaded to the specified folder and displayed in the Text field after clicking on "local image" and selecting a good image. When clicked, the linked picture in the left text box can also be added to the text field. It is worth saying that after the upload of the image can be modified after the size of the text box to modify the value of the line, the cursor left the text box after the automatic modification.

4. Having finished the above function, we can add the event to ". Up-img" and "link-img" and get the image address, then upload to the specified folder via Ajax.

★ "Local Picture" event JS code

Upload pictures locally $ (". Up-img"). Change (function () {var path = $ (this). Val ();            var d = new Date (); $.ajax ({type: "POST", url: ".. /ajax/upload.ashx ", data: {Fileurl:encodeuri (path), Uploadurl:enco Deuri ("..                    /upload/notice/"), Time:d.getseconds ()}, DataType:" Text ", Error:function () {ZENG.msgbox.show (' request Error!                    ', 1, 2000);                            }, Success:function (data) {if (Data.length >= 2) {                            var url = data; $ (". Simditor-body"). HTML ($ (". Simditor-body"). HTML () + "<p></p> ");//Add the picture to the Text field Editor.sync ();//Synchronize the body contents of the editor to the Val attribute of the TEXTAREA element, and return the value to the HTML of the editor body                        Content.    ZENG.msgbox.show (' Upload success!                        ', 4, 2000); } else if (data = = "0") {ZENG.msgbox.show (' Please select a picture to upload!                        ', 1, 2000); } else if (data = = "1") {ZENG.msgbox.show (' can only upload pictures in jpg/png/gif/bmp format!                        ', 1, 2000); } else if (data = = "2") {ZENG.msgbox.show (' file is not currently writable!                        ', 1, 2000); } else {ZENG.msgbox.show (' upload failed!                        ', 5, 2000);        }                    }                }); });

★ "Outside the chain Picture" event JS code

Outer chain picture        $ (document). On ("click", ". Link-img", function () {            $ (". Selected"). attr ("src", $ (". Image-src"). Val ()) ;//Replace the picture link in the text box with the link on the default picture (            ". Selected"). CSS ("Max-width", "90%");            $ (". Selected"). CSS ("height", "Auto");        });

★ajax Background Code

Using system;using system.collections.generic;using system.configuration;using system.io;using System.Linq;using System.net;using system.web;namespace lovingtrip.ajax{///<summary>//Upload//Upload file///</            Summary> public class Upload:ihttphandler {public void ProcessRequest (HttpContext context) { File path String FileURL = Context. request.form["FileURL"] = = null? "": Httputility.urldecode (context.            request.form["FileURL"]); Upload path String uploadurl = Context. request.form["Uploadurl"] = = null? "": Httputility.urldecode (context.            request.form["Uploadurl"]); if (FileURL = = "" | |                Uploadurl = = "") {//Please select Upload file! Context.                Response.Write ("0");            Return            } FileInfo File = new FileInfo (FileURL); String imgtype = configurationmanager.appsettings["Imgtype"].            ToString (); if (Imgtype.indexof (file. Extension.substring (1)) <0) {//Verify file format context.                Response.Write ("1");            Return } String fullPath = HttpContext.Current.Server.MapPath (uploadurl);//Get Physical path if (!            Directory.Exists (FullPath)) {directory.createdirectory (FullPath);//If not present, create}            String date = DateTime.Now.ToString ("Yyyymmddhhmmss"); String url = fullPath + date + file.            name;//Completion Path//Create WebClient instance WebClient mywebclient = new WebClient ();            Set Windows network Security authentication Method 1 mywebclient.credentials = CredentialCache.DefaultCredentials;            Set Windows network Security authentication Method 2//networkcredential cred = new NetworkCredential ("UserName", "userpwd");            CredentialCache cache = new CredentialCache (); Cache.            ADD (New Uri ("Uploadpath"), "Basic", cred);            Mywebclient.credentials = cache; FileStream fs = new FileStream (FileURL, FileMode.Open, FileAccess.Read);            BinaryReader r = new BinaryReader (FS);                   The UploadFile method can be used in the following format//mywebclient.uploadfile (ToFile, "PUT", Filenamepath); byte[] Postarray = r.readbytes ((int) fs.            Length);            Stream poststream = mywebclient.openwrite (URL, "PUT");            if (poststream.canwrite) {poststream.write (Postarray, 0, postarray.length); } else {context.            Response.Write ("2");//file is currently not writable return;            } poststream.close (); Context. Response.Write (uploadurl+date + file.            Name);//Upload succeeded} public bool IsReusable {get {return false; }        }    }}

Simditor upload Image (Asp.net+js/jquery)