Django Iframe +Form 上传图片文件等前端显示

在Django中 Iframe + Form 上传文件图片并预览

后端views.py

def upload(request):return render(request,'upload.html')import json,os,uuid
def upload_img(request):nid=str(uuid.uuid4()) # 防止文件名称相同ret={"status":True,"data":None,"message":None}#data存储在服务器的路径obj = request.FILES.get("k3")file_path=os.path.join("static",nid+obj.name)f=open(file_path,'wb')for line in obj.chunks():    #上传文件到服务器端f.write(line)f.close()ret["data"]=file_path   #将文件所在的路径返回给前端return HttpResponse(json.dumps(ret))

前端显示 upload.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><iframe style="display: none" id="iframe1" name="ifra1"></iframe>
<form id="fm1" action="/upload_img" method="POST" enctype="multipart/form-data" target="ifra1"><input type="file" name="k3" onchange="uploadFile()" />
</form>
<div id="preview">//显示图片的位置
</div><script src="/static/plugins/bootstrap/js/jquery-3.1.1.min.js"></script>
<script>function uploadFile() {document.getElementById('iframe1').onload = reloadIframe1;document.getElementById('fm1').submit();}function reloadIframe1() {var content = this.contentWindow.document.body.innerHTML;var obj = JSON.parse(content);console.log(obj.data);    //obj.data 获取后端图片的路径var tag=document.createElement("img");tag.src=obj.data;$("#preview").empty().append(tag)  //先清空内容在添加}</script>
</body>
</html>

Django Iframe +Form 上传图片文件等前端显示相关推荐

Django的form组件提交时错误不显示或无法提交
出现的问题:在学习django的form组件时,对不符合form组件定义的字段无法提交,进而导致无法显示出自定义的错误信息.(因为无法提交就代表着数据没有传给后台,然后你的错误回显是在后台对数据的检验 ...
django返回excel文件给前端下载
Django使用openpyxl返回excel文件给前端下载虚拟环境导入 pip install openpyxl views.py代码: import datetime from openpyxl ...
Django的Form表单
Django的Form表单 Django Form Form介绍 Form 表单是在前端向后端提交数据最常用的方式,同时在好多场景下都需要对用户的输入进行校验. 以注册为例,Form 需要的三件事: ...
建站四部曲之前端显示篇（React+上线）
本系列分为四篇: 建站四部曲之后端接口篇(SpringBoot+上线) 建站四部曲之Python数据爬虫篇(selenium) 建站四部曲之前端显示篇(React+上线) 建站四部曲之移动端篇(And ...
Django基础11（Django中form表单）
Form介绍之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否输入 ...
django之Form表单
HTML表单在HTML中,表单是<form>...</form> 之间元素的集合,它们允许访问者输入文本.选择选项.操作对象和控制等等,然后将信息发送回服务器. 某些表单的元 ...
Django中Form组件的使用
Form介绍 HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否输入,输入 ...
ajax异步上传图片文件并将其转换为base64格式
ajax异步上传图片文件并将其转换为base64格式高级浏览器上面,可以直接使用html5的FileReader,实现获取上传文件的base64格式,并以字符串形式提交.对于IE9以下的浏览器,就得 ...
Django Admin 上传多张图片并显示缩略图
Django Admin 上传多张图片并显示缩略图文章目录 Django Admin 上传多张图片并显示缩略图 1.效果预览 2.自定义Widget 3.定义模型和模型表单 3.1 定义模型 3.2 ...

Django Iframe +Form 上传图片文件等前端显示

Django Iframe +Form 上传图片文件等前端显示相关推荐

最新文章

热门文章

Django Iframe +Form 上传图片文件等 前端显示

Django Iframe +Form 上传图片文件等 前端显示相关推荐

最新文章

热门文章

Django Iframe +Form 上传图片文件等前端显示

Django Iframe +Form 上传图片文件等前端显示相关推荐