<!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. 在Django中运行ExtJS 事例

    网上关于ExtJS的事例挺多的,但是在Django中使用ExtJS挺少的,当然了,一些大牛觉得ExtJS运用在页面上是很简单的事,但是对于菜鸟来说,实在有点困难. 我这个例子是用在了sublime3这 ...

  2. vue-cli项目在IE下运行钩子函数抛出异常“ReferenceError: “Promise”未定义&quot;”的解决办法

    兼容IE是个坑,低版本IE很多都没法跑起来 问题现象:vue-cli项目在IE下运行,会在钩子函数出现 ReferenceError: “Promise”未定义 解决办法: step1:安装最新的we ...

  3. C#中的参数和调用方式（可选参数、具名参数、可空参数）

    具名参数 和 可选参数 是 C# framework 4.0 出来的新特性. 一. 常规方法定义及调用 public void Demo1(string x, int y) { //do someth ...

  4. SoapUI工具做get请求和post请求接口测试

    转载自:https://www.cnblogs.com/hong-fithing/p/7617366.html 此篇主要介绍SoapUI工具做常用的两种请求接口测试,分别是get请求和post请求. ...

  5. Hadoop 2.x 版本的单机模式安装

    Hadoop 2.x 版本比起之前的版本在Hadoop和MapReduce上做了许多变化,主要的变化之一,是JobTracker被ResourceManager和ApplicationManager所 ...

  6. http请求返回响应码及意义

    http 响应码及意义 HTTP状态码(HTTP Status Code)是用以表示网页服务器HTTP响应状态的3位数字代码.它由 RFC 2616 规范定义的,并得到RFC 2518.RFC 281 ...

  7. Java Web开发Session超时设置

    在Java Web开发中,Session为我们提供了很多方便,Session是由浏览器和服务器之间维护的.Session超时理解为:浏览器和服务器之间创建了一个Session,由于客户端长时间(休眠时 ...

  8. python 函数内使用自己的函数名

    def p(): import sys print sys._getframe(1).f_code.co_name def f(): p() def f1(): p() if __name__ == ...

  9. 【CentOS】自定义服务添加

    1.创建服务需要执行的脚本 cd /sb/scripts vi td-agent-testlog #!/bin/bash # # /etc/rc.d/init.d/td-agent-DC01 # # ...

  10. 关于springboot2.x 的 RedisCacheManager变化

    springboot配置缓存过期时间,大部分是使用ReidsCacheManager来进行自定义的配置 以下是大部分网上的代码(这也是基于springboot1.x的版本可以使用的) @Beanpub ...