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. test文件夹，测试类是放在src目录下的，test测试代码是代码啊，当然要放在代码文件夹下

    test文件夹,测试类是放在src目录下的,test测试代码是代码啊,当然要放在代码文件夹下 Maven的标准工程结构 Maven的标准工程结构如下: |-- pom.xml(maven的核心配置文件 ...

  2. Java web开发中主要用到的jar包

    1.Java开发中主要用到的jar包介绍:(1)java JDK基础开发包:java包和javax包.书写方式:import java.lang.reflect.InvocationTargetExc ...

  3. [React] Understanding setState in componentDidMount to Measure Elements Without Transient UI State

    In this lesson we'll explore using setState to synchronously update in componentDidMount. This allow ...

  4. 实现 jstl标签foreach 功能

    jsp 页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...

  5. C# 位域[flags]

    .NET中的枚举我们一般有两种用法,一是表示唯一的元素序列,例如一周里的各天:还有就是用来表示多种复合的状态.这个时候一般需要为枚举加上[Flags]特性标记为位域,例如: [Flags]   enu ...

  6. 解决局域网内无法IP访问IIS已发布的网站

    在IIS上发布的网站,本地可以访问,但是局域网内其他电脑却访问不了,原来是防火墙的问题,关闭它就可以访问了. 上面是我的简单操作 后来又百度了一下,发现有个更详细的操作:http://jingyan. ...

  7. （转载）Android支付宝支付封装代码

    Android支付宝支付封装代码 投稿:lijiao 字体:[增加 减小] 类型:转载 时间:2015-12-22我要评论 这篇文章主要介绍了Android支付宝支付封装代码,Android支付的时候 ...

  8. 脱离node自己使用普通的requirejs管理js资源

    首先,工程目录: 现在主页面(web框架写法.html): <!DOCTYPE html> <html lang="en"> <head> &l ...

  9. 1806最大数 string和sort函数用法

    1.C++自带sort函数用法 sort函数有三个参数: (1)第一个是要排序的数组的起始地址 (2)第二个是结束的地址(最后一位要排序的地址) (3)第三个参数是排序的方法,可以是从大到小也可是从小 ...

  10. Debian/Linux 下无线网卡驱动的安装

    我的 PC 型号是 Acer V3-572G, 安装了 Debian 后, 发现只能通过有线网络上网, 无法识别无线网卡, 以下是解决的过程(不局限于此型号 PC): 在命令行键入 lspci , 得 ...