ifram+form方式实现文件、图片上传、预览
1、前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.btn{
display: inline-block;
padding: 5px 10px;
background-color: coral;
color: white;
}
</style>
</head>
<body> <iframe style="display: none" id="iframe1" name="ifra1"></iframe>
<form id="fm1" action="/upload_img.html" method="POST" enctype="multipart/form-data" target="ifra1">
<input type="file" name="k1" onchange="uploadFile();" />
</form>
<h3>预览</h3>
<div id="preview">
</div>
<script src="/static/js/jquery-3.1.1.js"></script>
<script>
//文件上传控件绑定onchange事件,当有文件上传就触发表单提交
function uploadFile() {
document.getElementById('iframe1').onload = reloadIframe1;
document.getElementById('fm1').submit();
} //取得iframe控件的返回值,并将值取出进行json反序列化,
function reloadIframe1() {
var content = this.contentWindow.document.body.innerHTML;
var obj = JSON.parse(content); //创建img控件,并将远端的图片地址赋予image。
var tag = document.createElement('img');
tag.src = obj.data;
$('#preview').empty().append(tag);
}
</script>
</body>
</html>
2、后端代码
def upload_img(request):
ret={'status':True,'data':None}
obj = request.FILES.get('k1')
print(obj)
file_path = os.path.join('static',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))
ifram+form方式实现文件、图片上传、预览的更多相关文章
- html,图片上传预览,input file获取文件等相关操作
input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...
- FileReader()读取文件、图片上传预览
前言 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中File对象可以是来自用户 ...
- 用html5文件api实现移动端图片上传&预览效果
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继 ...
- [前端 4] 使用Js实现图片上传预览
导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...
- 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转
文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...
- ASP.NET工作笔记之一:图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- js实现图片上传预览及进度条
原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
随机推荐
- 深入浅出Spring(一)Spring概述
现在很多的企业级项目中基本上都会用到了Spring框架,那么为什么会出现Spring,Spring是什么?这次的博文我主要为大家简单介绍一下Spring. Java EE优缺点 我们都知道在2003年 ...
- Qt打开文件对话框
项目中需要打开文件对话框,就查了一下,不得不说Qt的帮助文档做的真好,非常详细.要实现这个功能有两种方式,使用QFileDialog的静态方法,实例化QFileDialog对象. 基本算是照抄帮助文档 ...
- 整合hibernate的lucene大数据模糊查询
大数据模糊查询lucene 对工作单使用 like模糊查询时,实际上 数据库内部索引无法使用 ,需要逐条比较查询内容,效率比较低在数据量很多情况下, 提供模糊查询性能,我们可以使用lucene全文 ...
- jquery easy ui 验证框架
引入参考最下面API ) var reg = /^1[3|4|5|8|9]\d{9}$/; return reg.test(value); }, message: '输入手机号码格式不准确.' } } ...
- Unix系统编程()执行非局部跳转:setjmp和longjmp
使用库函数setjmp和longjmp可执行非局部跳转(local goto). 术语"非局部(nonlocal)"是指跳转目标为当前执行函数之外的某个位置. C语言里面有个&qu ...
- Javascript代码执行过程-《悟透Javascript》笔记
本文摘录自李战老师<悟透Javascript>一书的部分章节,为适应博客发表作了一点点修改. 1) 预编译分析. JavaScript执行引擎将所有定义式函数直接创建为作用域上的函数变量, ...
- sql 使用整理
今天使用视图查询东西,为了方便直接select * 查出来的都行全部都错乱了,看来sql 超过20个以上的字段为了效率和安全,禁止用select * -------------查一个表的所有字段的-- ...
- 【BZOJ】1619: [Usaco2008 Nov]Guarding the Farm 保卫牧场(dfs)
http://www.lydsy.com/JudgeOnline/problem.php?id=1619 首先不得不说,,题目没看懂.... 原来就是找一个下降的联通块.... 排序后dfs标记即可. ...
- Linux心得记录
2014.4.8 linux环境下如何删除一个目录? rm -r linux本身提供删除目录命令——rmdir,但是如果你要删除的目录中含有子目录或者子文件,那么该命令会提示“删除失败:目录非空“也就 ...
- Hibernate 自动生成数据库表
http://blog.csdn.net/u010096526/article/details/50533428