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. spring boot启动原理步骤分析

    spring boot最重要的三个文件:1.启动类 2.pom.xml 3.application.yml配置文件 一.启动类->main方法 spring boot启动原理步骤分析 1.spr ...

  2. Java7的那些新特性

    本文介绍的java 7新特性很多其它的感觉像是语法糖.毕竟java本身已经比較完好了.不完好的非常多比較难实现或者是依赖于某些底层(比如操作系统)的功能. 不过java7也实现了类似aio的强大功能. ...

  3. POJ 1721

    好像不需要用到开方什么的... 可以知道,一副牌即是一个循环,那么,由于GCD(L,K)=1,所以一次洗牌后,亦是一个循环.其实,K次洗牌等于是T^(2^K)了.既然是循环,必定有周期.那么,周期是多 ...

  4. nyoj--1087--摆方格（规律）

    摆方格 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描述 给你一个n*n的方格,每个方格里的数必须连续摆放如 1 2 4 3 ,下图为不连续的,请输出从左上角到右下角的对角 ...

  5. VMware虚拟机ubuntu显示屏幕太小解决办法

    使用VMware安装的ubuntu虚拟机的显示屏幕太小,可以通过在VMware里安装"VMware Tool"插件解决,安装步骤记录一下. 1. 更改ISO文件路径 安装VMwar ...

  6. xmanager使用

    Xmanager全称Netsarang Xmanager,是国外一套非常优秀的远程监控软件.在UNIX/Linux和Windows网络环境中,Xmanager是最好的连通解决方案.我推 荐大家下载En ...

  7. Windows 10 Mobile 演示：系统输入法功能演示

    笔者近期会发布多篇<Windows 10 Mobile 演示>文章,帮助想买 Windows 10 手机的朋友了解 Windows 10 Mobile 系统特色.今天给大家带来 Windo ...

  8. Golang 中的 面向对象: 方法, 类, 方法继承, 接口, 多态的简单描述与实现

    前言: Golang 相似与C语言, 基础语法与C基本一致,除了广受争议的 左花括号 必须与代码同行的问题, 别的基本差不多; 学会了C, 基本上万变不离其宗, 现在的高级语言身上都能看到C的影子; ...

  9. 洛谷2114 bzoj3668[NOI2014]起床困难综合症

    题目描述 21世纪,许多人得了一种奇怪的病:起床困难综合症,其临床表现为:起床难,起床后精神不佳.作为一名青春阳光好少年,atm一直坚持与起床困难综合症作斗争.通过研究相关文献,他找到了该病的发病原因 ...

  10. luogu P3795 钟氏映射（递推）

    题意 n<=107 20MB 题解 也就是给n个点,把他们一个分为一组,或两个分为一组,有多少种方法. 空间大点随便做. 我们靠递推. 一个新点,要不自己一组,要不和前面的一个点构成一组. 所以 ...