码迷,mamicode.com
首页 > Web开发 > 详细

KindEditor的简单使用,以及上传图片预览图片,用户删除图片后的数据处理(重点)

时间:2018-04-15 12:10:36      阅读:414      评论:0      收藏:0      [点我收藏+]

标签:很多   from   文件夹   art   rgs   jpeg   settings   func   sed   

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

简单使用:

技术分享图片
<div class="comm">
                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div style="margin: 0 auto;" class="comment-area">
                        <div class="model {% if req.session.user_info %} hide {% endif %}">
                            您需要登录后才可以回帖 <a href="/login.html">登录</a> | <a href="/register.html">立即注册</a>
                        </div>
                        <textarea name="content" id="content"></textarea>
                    </div>
                    <div class="comment-sub">
                        <span>已输入23/255</span>
                        <button type="button" class="btn btn-primary btn-sm" {% if not req.session.user_info %} disabled="disabled" {% endif %}>提交回复</button>
                    </div>
                </form>
            </div>
HTML前端
    <script>
        $(function () {
            initKindEditor();
        });

        function initKindEditor() {
            var kind = KindEditor.create(#content, {
                width: 100%,       // 文本框宽度(可以百分比或像素)
                height: 300px,     // 文本框高度(只能像素)
                resizeType:0,    //不允许修改大小
                uploadJson: /uploadfile.html, //文件上传路径
                extraFileUploadParams: {        //文件上传的额外参数
                    csrfmiddlewaretoken: {{ csrf_token }}‘  //令牌使用,在POST数据上传时需要的
                },
                //filePostName:‘img‘,  修改上传的文件名字,默认是imgFile
                //fileManagerJson: ‘/kind/file_manager/‘, //指定浏览远程图片的服务器端程序。
                allowPreviewEmoticons: true,    //预览表情
                allowImageUpload: true, //允许图片上传
                items: [
                    fontname, fontsize, |, forecolor, hilitecolor, bold, italic, underline,
                    removeformat, |, justifyleft, justifycenter, justifyright, insertorderedlist,
                    insertunorderedlist, |, emoticons, image, link]  //编辑样式选择
            });
        }
    </script>

更多参数了解: http://kindeditor.net/docs/option.html

KindEditor的图片上传:

                uploadJson: /uploadfile.html, //文件上传路径
                extraFileUploadParams: {        //文件上传的额外参数
                    csrfmiddlewaretoken: {{ csrf_token }}‘ //令牌使用,在POST数据上传时需要的
                },
                //filePostName:‘img‘,  修改上传的文件名字

这3个和图片上传有关(了解)

后台处理:

settings配置:

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

注意后面不能写成绝对路径,不然路径连接时会出错(可以想下linux等系统,不分盘符,/就是根路径),所以我们注意这里
补充os.path.join,路径拼接

url设置:

    url(r^uploadfile.html$,home.uploadFile,{"document_root": settings.MEDIA_ROOT,web_root:settings.MEDIA_URL,image_list:settings.IMAGE_FIELDS}),

文件上传处理业务:

def handle_uploaded_file(fp,filePath,webPath,filename):  //fp文件指针,filepath是我们存放文件的基础目录, webpath是我们网站访问该图片的目录,filename是文件名
    if not os.path.exists(filePath):
        os.makedirs(filePath)
    with open(filePath+filename,wb+) as destination:
        for chunk in fp.chunks():
            destination.write(chunk)      //写入文件
    return webPath+filename  //返回web访问的文件路径

def uploadFile(req,*args,**kwargs):
    if req.method != "POST":
        return redirect(/)
    status = {
        error: 0,
        url: ‘‘,
        message: ‘‘
    }
    if req.FILES[imgFile]:
        file_name = str(req.FILES.get("imgFile"))
        from blog import settings
        if file_name.split(.)[-1] in kwargs[image_list]:
            #先上传到临时文件夹中,然后在与用户提交的评论进行正则匹配,若是匹配到的数据,则移动到正常文件夹中,剩余的图片(用户在编辑时自己删除了的)我们清空该文件夹,并替换用户的图片路径即可
            #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] = ret
        else:
            status[error]=1
            status[message]="文件格式不正确"
    else:
        status[error] = 2
        status[message] = "文件上传失败"
    return HttpResponse(json.dumps(status))

后面图片处理思路:

为用户先创立一个临时文件夹,在用户上传评论时,与img标签进行正则匹配,若是匹配到的数据,我们则移入到正确的路径,然后将临时文件夹删除即可。

其他思路可以参考:

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

基本上2种解决方案:

1. 先把图片提交到临时目录,提交到服务器后,用正则提取图片路径,和上传过的图片比较,如果用到就把图片移动到实际目录。

2. 采用图片空间管理,让用户自己删除多余的图片,一个用户的总容量限制就可以了,现在很多大网站都是这个做法。

或者:前端使用ajax进行删除,但是如果用户可以进行撤销操作,那么原来的图片使用ajax似乎不太正确:

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

大概思路:

技术分享图片

可以知道数据是使用iframe进行传输的:iframe无刷新上传文件:http://www.cnblogs.com/ssyfj/p/8533287.html(了解)

我们可以操作该对象,对img点击事件进行监听

$(".ke-edit-iframe")    //获取iframe对象

obj = $(".ke-edit-iframe") .contains()    //获取iframe中的document对象

$(obj).find("img")  //获取img元素对象,使用click等就可以进行监听,使用户点击使进行删除选项,同意则使用ajax进行删除

技术分享图片

 

KindEditor的简单使用,以及上传图片预览图片,用户删除图片后的数据处理(重点)

标签:很多   from   文件夹   art   rgs   jpeg   settings   func   sed   

原文地址:https://www.cnblogs.com/ssyfj/p/8836326.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!