<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form action="/upload.html" method="POST" enctype="multipart/form-data">

        <input type="text" name="file_name">

        <div style="position: relative">

            <a>点击上传文件</a>

            <input type="file" name="is_file" style="opacity: 0;position: absolute;top: 0;left: 0;">

        </div>

        <input type=submit name="OK">

    </form>

</body>

</html>
from django.shortcuts import render,HttpResponse

# Create your views here.

def upload(request):

    if request.method == "GET":

        return render(request,"upload.html")

    else:

        #print(request.POST)   #<QueryDict: {'file_name': ['12321321'], 'OK': ['提交']}>

        #print(request.FILES)  #<MultiValueDict: {'is_file': [<TemporaryUploadedFile: 说明书.pdf (application/pdf)>]}>

        filename = request.POST.get("file_name")

        isfile = request.FILES.get("is_file") #isfile是对象(内容有文件大小,文件名称,文件内容等)

        print(isfile.name,isfile.size)   #isfile.name文件名   #isfile.size文件大小,可以拿这值做限制

        f = open('file/'+isfile.name,'wb')

        for data in isfile.chunks():

            f.write(data)

        f.close()

        return HttpResponse("ok")

2 通过ajax上传文件三种方式:

 view代码三种方式都用这个代码

def file(request):
    #print(request.FILES)
    #print(request.POST)
    isfile = request.FILES.get("isfile")  # isfile是对象(内容有文件大小,文件名称,文件内容等)

    print(isfile)  # isfile.name文件名   #isfile.size文件大小,可以拿这值做限制

    f = open('static/' + isfile.name, 'wb')
    for data in isfile.chunks():
       f.write(data)
    f.close()
    return HttpResponse("OK")

　　-jQuery　

　　　　  html代码　

　　<input type="file" id="pufile">
　　<a class="btn" onclick="AjaxSubmitFile()">上传</a>

jQuery代码
function AjaxSubmitFile() {
    var data = document.getElementById("pufile").files[0];//加上索引files[0]就是文件的内容,固定写法
    var f = new FormData();
    f.append('k1','k1'),   //k1,k1是添加的一个数据到这个FromData里面去
    f.append('k3','k3'),
    f.append('isfile',data);
    $.ajax({
        url:"/file/",
        type:"POST",
        data:f,
        success:function (arg) {
            console.log(arg)
        },
        processData: false,//通过FormData处理数据 jQuery上传文件必须要加这个 tell jQuery not to process the data
        contentType:false,//通过FormData处理数据 jQuery上传文件必须要加这个 tell jQuery not to set contentType
        //以上表示jQuery data数据内容不需要做处理了,把FormData内容发过去给服务器就可以了
    })
}
 

-原生　

function AjaxSubmitFile1() {
    var data = document.getElementById("pufile").files[0];//加上索引files[0]就是文件的内容,固定写法
    var f = new FormData();
    f.append('k1','k1');
    f.append('k3','k3');
    f.append('isfile',data);
    var xhr = new XMLHttpRequest() ;    <!-- #创建一个对象 -->
    xhr.open('POST','/file/');    <!--#与那个url创建连接-->
    xhr.onreadystatechange =function (){
        if(xhr.readyState == 4){
            // 4-完成，已经接收到全部响应数据；
            console.log(xhr.responseText);
        };
    };   <!-- #onreadystatechange状态改变的时候执行function -->
    xhr.send(f);             <!-- #开始发送-->
}

默认情况下,jQuery 和 原生 以上两种是不支持上传文件的,但是可以利用FormData对象来封装用户提交的数据(FormData可以封装数据,也可以封装文件)

 -ifrname+ Form

html代码

<iframe style="display: none" name="fileifrname"></iframe>
<form id="putifrname" action="/file/" method="post" target="fileifrname" enctype="multipart/form-data">
    <input type="text" name="k1">
    <input type="text" name="k2">
    <input type="file" name="isfile">
    <a onclick="putifrname()">上传</a>
</form>

function putifrname() {
    document.getElementById("putifrname").submit();//点击putifrname标签,就开始提交
}

上传图片显示在页面,并且页面不自动刷新

Veiw代码:

def file(request):
    print(request.FILES)
    print(request.POST)
    isfile = request.FILES.get("isfile")  # isfile是对象(内容有文件大小,文件名称,文件内容等)

    print(isfile)  # isfile.name文件名   #isfile.size文件大小,可以拿这值做限制

    f = open('static/' + isfile.name, 'wb')
    for data in isfile.chunks():
       f.write(data)
    f.close()

    import os,json
    name = json.dumps(os.path.join("static",isfile.name))
    print(name)
    return HttpResponse(name)

Html代码:

<h1>Ifrname+Form上传</h1>
<iframe style="display: none" name="fileifrname" id="fileifrname"></iframe>
<form id="putifrname" action="/file/" method="post" target="fileifrname" enctype="multipart/form-data">
    <input type="text">
    <input type="file" name="isfile" onchange="putifrname()">   <!--//内容改变的时候;自动执行putifrname自动提交-->
</form>

<div id="png"></div>

<script>
    function putifrname() {
        document.getElementById('fileifrname').onload = test;     
        document.getElementById("putifrname").submit();    //提交的时候给上面ifrname标签加上 onload=test  让执行完后执行test函数
    }

    function test() {
        var data = this.contentWindow.document.body.innerHTML;
        var obj = JSON.parse(data);
        console.log(obj);
        var tag = document.createElement('img');
        tag.src = "http://127.0.0.1:8000/" + obj;
        $("#png").empty().append(tag)
    }

</script>

Django上传文件和上传图片(不刷新页面)的更多相关文章

  1. (转)django上传文件

    本文转自:http://www.cnblogs.com/linjiqin/p/3731751.html 另:  本文对原文做了适当修改 更为详细的介绍可以参考官方文档. emplate html(模板 ...

  2. django上传文件

    template html(模板文件): <form enctype="multipart/form-data" method="POST" action ...

  3. 实现简单的django上传文件

    本文用django实现上传文件并保存到指定路径下,没有使用forms和models,步骤如下: 1.在模板中使用form表单,因为这个表单使用于上传文件的,所以method属性必须设置为post,而且 ...

  4. el-upload 上传文件和上传图片的基本用法

    el-upload 上传excel <template> <el-form :model="form"> <el-form-item label=&q ...

  5. Django上传文件的那些参数

    # ################## 默认文件上传配置 ######################## from django.core.files.uploadhandler import M ...

  6. 20-1 django上传文件和项目里上传头像如何查看

    一 普通上传方式 1 views def upload(request): if request.method == "POST": # print(request.POST) # ...

  7. Django上传文件的两种方式

    基于form表单上传文件 HTML <h3>基于form表单的上传文件</h3> <form action="" method="post& ...

  8. 【python】django上传文件

    参考:https://blog.csdn.net/zahuopuboss/article/details/54891917 参考:https://blog.csdn.net/zzg_550413470 ...

  9. Python - Django - 上传文件

    upload.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

随机推荐

  1. Kali Linux系统的安装、配置、使用

    这个随便写的,随便看看就好,主要给讲一下安装过程 这里因为我物理机装的本来就是kali.所以懒得重装了,直接拿虚拟机演示一下 物理机安装kali的话,推荐使用rufus使用dd模式刻盘,不会造成之后的 ...

  2. 使用Visual Studio 2017开发Linux程序

    环境: win7_x64旗舰版.VS2017企业版.VMware10.0.2.CentOS7 在CentOS7上首先需要安装gcc.g++和gdbserver,这里就不多说 一.安装VS2017 1. ...

  3. 什么是真正的Java技术，本篇文章让你了解

    “你学习一门技术的最佳时机是三年前,其次是现在.”这句话对于哪一种行业都很适用,如果你已经学习过Java,那么恭喜你你很有先见之明,如果你并不了解Java,这篇文章带你快速掌握Java的几个核心知识点 ...

  4. ORA-00257: archiver error. Connect internal only, until freed……

    今天给客户测 试问题,让客户把数据发过来了.解压缩后一看,他们还是用的oracle 815版本的(他们exp导出时,带了导出日志,从导出日志中看出来是oracle 815版本的),不过没有关系,低版本 ...

  5. 华硕ASUSPRO P5440UA笔记本电脑安装驱动

    领了一台公司的办公笔记本,按照套路重装了系统(win10),后面发现悲剧了 采坑1: 从华硕通过型号搜索下来的无线网卡(WIFI) 驱动无法安装(双击启动没有反映) 解决:通过设备Id上google搜 ...

  6. C#，调用dll产生 "尝试读取或写入受保护的内存 。这通常指示其他内存已损坏。"的问题

    由于易语言与c#做的DESC加解密方式,返回的数据不一致,所以,我用易语言写了一个dll,供c#调用, 结果在post的时候,有时候能正确返回数据,有时候则不能正常返回,而是返回空数据(c#没有做异常 ...

  7. 【C++】源自指针的报错

    最近在调试PCL程序的时候,被这个报错折腾了好久. 无数血泪史总结成一句话,指针未初始化! PointCloudXYZ::Ptr plane_ptr;   错误!!! PointCloudXYZ::P ...

  8. 由consequence忽然发现英语也挺有意思

    con- 是拉丁语前缀, 有 with, together 的意思. con- 和 com- 一样的. 只是因为 在 b p m 前发 m 音更方便, 所以这些音前的 con- 变为 com- (例 ...

  9. function "round" declared implicitly

    keil工程代码,浮点计算中引用了数学库 math.h 中的round函数,但编译时出现告警 “warning:  #223-D: function "round" declare ...

  10. mybatis中大于等于小于等于的写法

    标准写法如下: 第一种写法(1): 原符号 < <= > >= & ' "替换符号 < <= > >= & &apos ...