<!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. vue 在全局设置cookie main.js文件

    //设置cookie Vue.prototype.setCookie=function(cname, cvalue, exdays) { var d = new Date(); d.setTime(d ...

  2. influxdb 全家桶运行

    一个简单的demo,集成了telegraf,influxdb,chronograf,kapacitor,nginx,一张来自官方的参考图 组件集成图 环境准备 使用docker-compose doc ...

  3. numpy 和tensorflow 中的乘法

    矩阵乘法:tf.matmul()   np.dot() ,@ 逐元素乘法:tf.multiply()  np.multiply()

  4. 2018-2019-2 20175207 实验一《JAVA开发环境的熟悉》实验报告

    目录 使用JDK编译运行简单程序 使用IDEA对程序进行调试 实验练习 产生一个随机数,让用户猜测,猜错了告诉用户是大了还是小了. 并进行测试(正常情况,异常情况,边界情况) 实验总结 使用IDEA编 ...

  5. python selenium-webdriver 等待时间（七）

    测试过程中,我们经过发现脚本执行的时候展现出来的效果都是很快结束了,为了观察执行效果我们会增加一个等待时间来观察一下执行效果.这种等待时间我们只是为了我们便于观察,这种情况下是否包含等待时间不会影响我 ...

  6. TCP连接异常：broken pipe 和EOF

    本文介绍3种TCP连接异常的情况. 1.server端没有启动,client尝试连接 ./client dial failed: dial tcp 127.0.0.1:8080: connect: c ...

  7. mvc项目远程发布到windows server服务器

    1.安装IIS的时候需要将这两个选项勾选起来 2.确保 管理服务委派 这个选项存在 3.添加委派规则 4.配置IIS管理用户,后续需要用这个用户进行发布连接 5.配置站点的IIS权限 选择刚才在前面设 ...

  8. express中遇到的一个小问题“403”

    这样子的一个express简单项目文件执行会出现403 Forbidden的错误: var express = require('express'); var app = express(); app ...

  9. Django-Form组件之字段

    Form类 创建Form类时,主要涉及到 [字段] 和 [插件],字段用于对用户请求数据的验证,插件用于自动生成HTML; 1.Django内置字段如下: 1 2 3 4 5 6 7 8 9 10 1 ...

  10. 服务器对接码云webhooks

    服务安装git php代码(外网必须可以访问) <?php //本地路径滚adminasdfdasfasdf $file = "/wwwroot/webhooksLog.txt&quo ...