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. HDOJ 1753 大明A+B

    JAVA大数.... 大明A+B Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  2. Oracle Study之--Oracle 单实例11.2.0.1.0升级到11.2.0.3.0

    Oracle Study之--Oracle 单实例11.2.0.1.0升级到11.2.0.3.0 系统环境: 操作系统:RedHat EL6(64位) Oracle:    Oracle 11gR2 ...

  3. spring boot系统学习（知识点笔记）

    一.http的注解配置 1.@SpringBootAplication=@SpringBootConfiguration(其实就是个@Configuration)+@EnableAutoConfigu ...

  4. AspNet WebApi 中应用fo-dicom抛出异常：No codec registered for tranfer syntax:

    背景: 在做一个Dicom Web Service, 当中WADO-RS中须要解析TransferSyntax, 然后就用到了fo-dicom中的DicomFile.ChangeTransferSyn ...

  5. fatal error C1003: error count exceeds number; stopping compilation解决方法

    [error]C1003: error count exceeds 100; stopping compilation ...winnt.h 在项目工程中添加#include<windows.h ...

  6. javascript对象的深度克隆

    在做项目的时候需要向对象里面添加新属性,又不想修改原对象.于是就写: var newObj = oldObj,但是新对象属性改变后就对象也会跟着改变,这是因为无论是新对象还是旧对象,指向的内存地址都是 ...

  7. 利用@keyframe及animation做一个页面Loading时的小动画

    前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1  @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧 ...

  8. Codeforces 988F. Rain and Umbrellas

    解题思路:动态规划 遍历点i,如果从前一个点i-1走到这个点i不需要伞,则疲劳值不变dp[i] = dp[i-1]. 如果前一个点i-1走到这一个点i需要伞,则从前面找一把伞. 即遍历前面的每个点j, ...

  9. 在网页html中嵌入特殊字体

    1.字体格式 .EOT,适用于Internet Explorer 4.0+ .TTF或.OTF,适用于Firefox 3.5.Safari.Opera .SVG,适用于Chrome.IPhone 最常 ...

  10. ueditor 编辑器，自定义图片上传

    <div> <h1>完整demo</h1> <form method="post" name="form"> & ...