Kindeditor simple use, as well as upload picture preview image, user delete image after data processing (emphasis)

Http://www.cnblogs.com/wupeiqi/articles/6307554.html

Simple to use:

<divclass="Comm"> <form method="POST"Enctype="Multipart/form-data">                    {% Csrf_token%}                    <div style="margin:0 Auto;" class="Comment-area"> <divclass="Model {% if Req.session.user_info%} hide {% endif%}">you need to log in before you can reply<a href="/login.html"> Login </a> | <a href="/register.html"> Register now </a> </div> <textarea name="content"Id="content"></textarea> </div> <divclass="comment-sub"> <span> entered 23/255</span> <button type="Button" class="btn btn-primary btn-sm"{%ifNot req.session.user_info%} disabled="Disabled"{% endif%}> submit reply </button> </div> </form> </div>

HTML frontend

<script>$ (function () {initkindeditor ();        }); function Initkindeditor () {varKind = Kindeditor.create ('#content', {width:'100%',//text box width (percent or pixel)Height'300px',//text box height (pixels only)Resizetype:0,//Do not allow modification of size Uploadjson:'/uploadfile.html',//File Upload pathExtrafileuploadparams: {//additional parameters for file uploads                    'Csrfmiddlewaretoken':'{{Csrf_token}}'//token use, required for post data upload                },                //filepostname: ' img ', modify the uploaded file name, default is Imgfile//Filemanagerjson: '/kind/file_manager/',//Specifies the server-side program that browses remote pictures. Allowpreviewemoticons:true,//Preview EmoticonsAllowimageupload:true,//allow images to be uploadeditems: ['FontName','fontsize','|','ForeColor','Hilitecolor','Bold','Italic','Underline',                    'Removeformat','|','Justifyleft','Justifycenter','Justifyright','insertorderedlist',                    'insertunorderedlist','|','Emoticons','Image','Link']//Edit style selection}); }    </script>

More parameters Learn: http://kindeditor.net/docs/option.html

Kindeditor image upload:

                ' /uploadfile.html ' // File upload path                Extrafileuploadparams: {        // additional parameters for file upload                    'csrfmiddlewaretoken  "{{Csrf_token}}'//token used, required for post data upload                 },                //  filepostname: ' img ',  modify the uploaded file name

These 3 are related to picture uploading (understanding)

Background processing:

Settings configuration:

Media_url ='/static/uploads/'Media_root=os.path.join (Base_dir,'static/uploads') #注意使用路径连接时后面的必须是相对路径image_fields= (    'JPEG',    'PNG',    'gif',    'jpg',    'BMP',)

>>> Os.path.join ("c:/mypy/","/da/dwa")  'C:/da/dwa'>>> Os.path.join ("c:/mypy/","Da/dwa")'C:/mypy/da/dwa'Note that the following cannot be written as an absolute path, otherwise the path is connected with an error (you can think of Linux and other systems, no disc,'/'is the root path), so let's take a look here

Supplemental os.path.join, Path stitching

URL settings:

    URL (r'^uploadfile.html$', home.uploadfile,{"document_root" : Settings. Media_root,'web_root': Settings. Media_url,'image_list': Settings. Image_fields}),

File Upload processing business:

def handle_uploaded_file (fp,filepath,webpath,filename)://fp file pointer, FilePath is the base directory where we store the file, Webpath is the directory where our website accesses the image, FileName is the file nameifNot os.path.exists (filePath): Os.makedirs (FilePath) with open (FilePath+filename,'wb+') asDestination: forChunkinchfp.chunks (): Destination.write (chunk)//write filereturnwebpath+filename//Return Web Access to the file path def uploadfile (req,*args,**Kwargs):ifReq.method! ="POST":        returnredirect'/') Status= {        'Error':0,        'URL':"',        'message':"'    }    ifReq. files['Imgfile']: file_name= STR (req. FILES.Get("Imgfile"))         fromBlog Import SettingsifFile_name.split ('.')[-1]inchkwargs['image_list']: #先上传到临时文件夹中, and then match the comments submitted by the user, if the match to the data, then move to the normal folder, the remaining pictures (the user deleted the edit) we emptied the folder, and replace the user's picture path can be #static_path="comment/"+str (Datetime.date.today ()) +'/'Static_path="temp/"+str (req.session['User_info']['ID'])+'/'#以用户id为文件名的临时文件夹 Web_path= kwargs['Web_root'] +Static_path File_path= kwargs['Document_root']+'/'+static_path ret= Handle_uploaded_file (req. files['Imgfile'],file_path,web_path,file_name) status['URL'] =retElse: status['Error']=1status['message']="file format is incorrect"    Else: status['Error'] =2status['message'] ="File upload failed"    returnHttpResponse (Json.dumps (status))

Behind the picture processing ideas:

For users to create a temporary folder, when users upload comments, and the IMG tag to match the regular, if the match to the data, we will move to the correct path, and then delete the temporary folder.

Other ideas can be consulted:

http://kindeditor.net/view.php?bbsid=5&postid=6049

basically 2 solutions: 1 The image is submitted to the temporary directory, submitted to the server, with the regular extraction of the image path, and the uploaded image comparison, if used to move the picture to the actual directory.  2. The use of image space management, so that users can delete their own unnecessary images, a user's total capacity limit on it, and now many large sites are this practice.

Or: The front end uses Ajax to delete, but if the user can undo, then the original image using Ajax seems to be not correct:

Http://kindeditor.net/view.php?bbsid=7&postid=6834&pagenum=1

Approximate idea:

You can know that the data is transmitted using an IFRAME: IFRAME no flush Upload file: http://www.cnblogs.com/ssyfj/p/8533287.html (Learn)

We can manipulate the object and listen to the IMG click events

$ (". Ke-edit-iframe")    // get IFrame object  = $ (". Ke-edit-iframe"). Contains ()    // Gets the document object in the iframe ( obj). Find (  "img")  // get IMG Element object, use Click and so on can listen, let the user click Make Delete option, Agree to use Ajax to delete

Kindeditor simple use, as well as upload picture preview image, user delete image after data processing (emphasis)