views.py文件

def upload_file(request):

    username = request.POST.get('username')

    fafafa = request.FILES.get('fafafa')

    import os

    img_path = os.path.join('static/imgs/',fafafa.name)

    with open(img_path,'wb') as f:

        for item in fafafa.chunks():

            f.write(item)

    ret = {'code': True , 'data': img_path}

    import json

    return HttpResponse(json.dumps(ret))

upload.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .upload{

            display: inline-block;padding: 10px;

            background-color: brown;

            position: absolute;

            top: ;

            bottom: ;

            right: ;

            left: ;

            z-index: ;

        }

        .file{

            width: 100px;height: 50px;opacity: ;

            position: absolute;

            top: ;

            bottom: ;

            right: ;

            left: ;

            z-index: ;

        }

    </style>

</head>

<body>

    <div style="position: relative;width: 100px;height: 50px;">

        <input class="file" type="file" id="fafafa" name="afafaf" />

        <a class="upload">上传</a>

    </div>

    <input type="button" value="提交XHR" onclick="xhrSubmit();" />

    <input type="button" value="提交jQuery" onclick="jqSubmit();" />

    <hr/>

    <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">

        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>

        <input type="file" name="fafafa" onchange="changeUpalod();" />

        <input type="submit" onclick="iframeSubmit();" value="Form提交"/>

    </form>

    <div id="preview"></div>

    <script src="/static/jquery-1.12.4.js"></script>

    <script>

        function changeUpalod(){

            $('#ifm1').load(function(){

                var text = $('#ifm1').contents().find('body').text();

                var obj = JSON.parse(text);

                $('#preview').empty();

                var imgTag = document.createElement('img');

                imgTag.src = "/" + obj.data;

                $('#preview').append(imgTag);

            });

            $('#form1').submit();

        }

        function jqSubmit(){

            // $('#fafafa')[0]

            var file_obj = document.getElementById('fafafa').files[];

            var fd = new FormData();

            fd.append('username','root');

            fd.append('fafafa',file_obj);

            $.ajax({

                url: '/upload_file/',

                type: 'POST',

                data: fd,

                processData: false,  // tell jQuery not to process the data

                contentType: false,  // tell jQuery not to set contentType

                success:function(arg,a1,a2){

                    console.log(arg);

                    console.log(a1);

                    console.log(a2);

                }

            })

        }

        function xhrSubmit(){

            // $('#fafafa')[0]

            var file_obj = document.getElementById('fafafa').files[];

            var fd = new FormData();

            fd.append('username','root');

            fd.append('fafafa',file_obj);

            var xhr = new XMLHttpRequest();

            xhr.open('POST', '/upload_file/',true);

            xhr.onreadystatechange = function(){

                if(xhr.readyState == ){

                    // 接收完毕

                    var obj = JSON.parse(xhr.responseText);

                    console.log(obj);

                }

            };

            xhr.send(fd);

        }

        function iframeSubmit(){

            $('#ifm1').load(function(){

                var text = $('#ifm1').contents().find('body').text();

                var obj = JSON.parse(text);

                //

                $('#preview').empty();

                var imgTag = document.createElement('img');

                imgTag.src = "/" + obj.data;

                $('#preview').append(imgTag);

            })

        }

    </script>

</body>

</html>

django 笔记16 文件上传笔记的更多相关文章

  1. Django：学习笔记(8)——文件上传

    Django:学习笔记(8)——文件上传 文件上传前端处理 本模块使用到的前端Ajax库为Axio,其地址为GitHub官网. 关于文件上传 上传文件就是把客户端的文件发送给服务器端. 在常见情况(不 ...

  2. SpringMVC:学习笔记(8)——文件上传

    SpringMVC--文件上传 说明: 文件上传的途径 文件上传主要有两种方式: 1.使用Apache Commons FileUpload元件. 2.利用Servlet3.0及其更高版本的内置支持. ...

  3. 第三百一十九节，Django框架，文件上传

    第三百一十九节,Django框架,文件上传 1.自定义上传[推荐] 请求对象.FILES.get()获取上传文件的对象上传对象.name获取上传文件名称上传对象.chunks()获取上传数据包,字节码 ...

  4. springmvc学习笔记--支持文件上传和阿里云OSS API简介

    前言: Web开发中图片上传的功能很常见, 本篇博客来讲述下springmvc如何实现图片上传的功能. 主要讲述依赖包引入, 配置项, 本地存储和云存储方案(阿里云的OSS服务). 铺垫: 文件上传是 ...

  5. 超全面的JavaWeb笔记day22<文件上传>

    文件上传概述 1 文件上传的作用 例如网络硬盘!就是用来上传下载文件的. 在智联招聘上填写一个完整的简历还需要上传照片呢. 2 文件上传对页面的要求 上传文件的要求比较多,需要记一下: 1. 必须使用 ...

  6. 16.Django学习之文件上传和下载

    上传就这么六步! 一. settings配置文件中配置 MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'medias').repl ...

  7. struts2 笔记02 文件上传、文件下载、类型转换器、国际化的支持

    Struts2的上传 1. Struts2默认采用了apache commons-fileupload  2. Struts2支持三种类型的上传组件 3. 需要引入commons-fileupload ...

  8. Struts2学习笔记(十一)——文件上传

    1.单文件上传 单文件上传步骤: 1)创建上传jsp页面 文件上传的表单提交方式必须是POST方式,编码类型:enctype="multipart/form-data",默认是 a ...

  9. go web 第二天 学习笔记之文件上传

    package main import ( "crypto/md5" "fmt" "html/template" "io" ...

随机推荐

  1. hdu Swipe Bo(bfs＋状态压缩)错了多次的题

    Swipe Bo Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  2. Android开发工具---SQLiteManager插件

    Android开发工具---SQLiteManager插件 效果图例如以下: 平时在开发过程中查看数据库都要把数据库文件导出来,然后再用其它工具打开,SQLiteManager插件则给予我们一些便利. ...

  3. System.getProperty()方法可以获取的值

    /** 获得当前类的完整路径.最后一句 */ package org.outman.dms.server; import java.net.MalformedURLException; import ...

  4. Light OJ 1317 Throwing Balls into the Baskets 概率DP

    n个人 m个篮子 每一轮每一个人能够选m个篮子中一个扔球 扔中的概率都是p 求k轮后全部篮子里面球数量的期望值 依据全期望公式 进行一轮球数量的期望值为dp[1]*1+dp[2]*2+...+dp[ ...

  5. WIN7使用VisualSVN建立SVN服务器

    使用SVN开发十分的方便,这样就不用每次都拷贝粘贴来备份了,网上看到一篇给自己的windows电脑安装SVN服务器的使用非常方便. 1.下载安装文件(服务器端和客户端) 服务器端采用VisualSVN ...

  6. VC 下加载 JPG / JPEG / GIF / PNG 图片最简单的方法

    VC MFC 提供的 API LoadBitmap / LoadImage 类 CBitmap 等都只能操作 BMP 位图,图标.对于其他常用的 JPG / JPEG / GIF / PNG 格式,它 ...

  7. Laravel-redis-订阅发布

    Laravel-redis-订阅发布 标签(空格分隔): php Redis订阅发布 理解订阅发布: publish:将信息 message 发送到指定的频道 channel publish test ...

  8. oracle 11g dbms_workload_repository手工管理AWR快照，基线

    1.修改快照设置[sql] view plain copysys@ORCL> select * from dba_hist_wr_control; DBID SNAP_INTERVAL RETE ...

  9. activity的23张表

    --二进制数据表 SELECT * FROM act_ge_bytearray; --属性数据表存储整个流程引擎级别的数据,初始化表结构时,会默认插入三条记录, SELECT * FROM act_g ...

  10. vue路由跳转传参

    this.$router.push({ path: '/message/result_notice', query: { id: id } }) // let type = this.$route.n ...