欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Django2.0.4+富文本 跨域上传文件

程序员文章站 2022-04-13 13:07:23
...

主要是解决kindeditor跨域上传文件时的问题

在前端项目中，建立一个redirect.html,用来伪造同域获取参数

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>跨域重定向</title>
    <script type="text/javascript">
    function getParameter(val) {
        var uri = decodeURI(window.location.search);
        var re = new RegExp("" + val + "=([^&?]*)", "ig");
        return ((uri.match(re)) ? (uri.match(re)[0].substr(val.length + 1)) : null);
    }

        var upload_callback = function() {
            var error = getParameter("error");
            error = parseInt(error)
            var dataObject;
            if(error==0){
                var url = getParameter("url");
                dataObject = {"error": error, "url": url};
            }else{
                var message = getParameter("message");
                dataObject = {"error": error, "message": message};
            }
            var data =  JSON.stringify(dataObject)
            document.getElementsByTagName("body")[0].innerHTML = '<pre>' + data + '</pre>';
        }
    </script>
</head>
<body "upload_callback();">
</body>
</html>

前端富文本页面、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./static/js/jquery-1.12.1.min.js"></script>
    <script src='./static/js/kindeditor/kindeditor-all-min.js'></script>
    <title>美多编辑器</title>
</head>
<body>
    

    <textarea id='content'>富文本</textarea>
<button "checkit()">查看</button>
	  
	
	<script>

        initKindEditor();
     
        function initKindEditor() {
            var kind = KindEditor.create('#content', {
                uploadJson: 'http://localhost:8000/md_admin/front_upload',
                items : [ 'source', 'image'],
                width: '100%',       // 文本框宽度(可以百分比或像素)
                height: '300px',     // 文本框高度(只能像素)
                minWidth: 200,       // 最小宽度（数字）
                minHeight: 400      // 最小高度（数字）
            });
		}
		
		function checkit(){
			var content = $(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html()

			alert(content);


		}
    </script>

</body>
</html>

后台接口文件，不再需要返回json数据，而是直接重定向到之前伪造好的前端页面redirect.html

#跨域上传方法
def frontupload(request):
    if request.method == 'POST':
        item = {}
        file = request.FILES.get('imgFile')
        #定义跳转网址，就是前端伪造好的页面
        callBackPath = 'http://localhost:8080/redirect.html'
        f = open(os.path.join(UPLOAD_ROOT,'',file.name),'wb')
        item['message'] = '上传成功'
        item['url'] = 'http://localhost:8000/upload/'+ file.name
        item['error'] = 0
        #写文件 遍历图片文件流
        for chunk in file.chunks():
            f.write(chunk)
        return HttpResponseRedirect(callBackPath + "?error=0&url="+item['url'])

最后就可完美上传文件了，不过需要注意的一点是请求前端伪造好的页面跟上传文件时的路由必须是相同的请求 http://localhost:8000 或者 http://127.0.0.1:8000

相关标签： kindeditor

上一篇： jquery 最简单的ajax 例子

下一篇： 如何交朋友寻找人生中的伯乐？

推荐阅读