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方式实现文件、图片上传、预览的更多相关文章

  1. html,图片上传预览，input file获取文件等相关操作

    input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...

  2. FileReader()读取文件、图片上传预览

    前言 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中File对象可以是来自用户 ...

  3. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  4. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  5. 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转

    文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...

  6. ASP.NET工作笔记之一：图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  7. php 图片上传预览(转)

    网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  8. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  9. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  10. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

随机推荐

  1. 我的《C陷阱与缺陷》读书笔记

    第一章 词法“陷阱” 1. =不同于== if(x = y) break; 实际上是将y赋给x,再检查x是否为0. 如果真的是这样预期,那么应该改为: if((x = y) != 0) break; ...

  2. Java的==与equals之辨，简单解释，很清楚

    "=="和equals方法究竟有什么区别? (单独把一个东西说清楚,然后再说清楚另一个,这样,它们的区别自然就出来了,混在一起说,则很难说清楚) ==操作符专门用来比较两个变量的值 ...

  3. 使用vs2015编译器编译libpqxx时发生的错误以及解决办法

    d:\libpqxx-4.0\libpqxx-4.0\src\strconv.cxx(195): error C2440: “=”: 无法从“std::basic_istream<char,st ...

  4. dp之多重背包hdu1114

    题目很水,不多说......... #include<stdio.h> int main() { long t,n,m,a,i,j,dp[10005],vol[505],jizhi[505 ...

  5. UNION types numeric and text cannot be matched

    NULL ::NUMERIC 有时候会遇到这个问题,那是因为几个SQL组合在一起的时候,同一个字段的值,出来了不同类型的时候,这种时候就需要进行转型的处理了.

  6. C语言 · 利息计算

    算法提高 利息计算   时间限制:1.0s   内存限制:512.0MB      编制程序完成下述任务:接受两个数,一个为用户一年期定期存款金额,一个为按照百分比格式表示的利率:程序计算一年期满 后 ...

  7. PHP——小尾巴之权限管理

    流程: 在权限管理页面,默认显示用户的角色,更改复选框的按钮内容,可以改变角色,点击确定提交至数据库 在登陆之后,只显示该用户的角色所对应的权限 数据库: guanli.php <!DOCTYP ...

  8. 服务器操作系统应该选择 Debian/Ubuntu 还是 CentOS?

    早期,我们使用 Debian 作为服务器软件,后来转向了CentOS,主要原因如下: 1.CentOS/RHEL的生命周期是7年,基本上可以覆盖硬件的生命周期,也就意味着一个新硬件安装以后,不用再次安 ...

  9. easyui_extension.js

    $.extend($.fn.datagrid.methods,{ /** * 开打提示功能 * * @param {} * jq * @param {} * params 提示消息框的样式 * @re ...

  10. Javascript代码执行过程-《悟透Javascript》笔记

    本文摘录自李战老师<悟透Javascript>一书的部分章节,为适应博客发表作了一点点修改. 1) 预编译分析. JavaScript执行引擎将所有定义式函数直接创建为作用域上的函数变量, ...