<!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. 添加ssl证书

    ssl证书会使你的网站更加安全,防止isp在你的网站显示时添加广告,浏览网页时地址栏左边有一个绿色安全的图标,使用户感觉更加安全放心. 颁发ssl证书的机构很多,有收费的,也有免费的.当然对于自己的小 ...

  2. redis过期机制

    Redis会自己回收清理不用的数据吗? 如果能,那如何配置? 如果不能,如何防止数据累加后大量占用存储空间的问题? 之前一直接触Redis不是很深入,最近项目当中遇到一个需求场景,需要清空一些存放在R ...

  3. PyCharm导入tensorflow包

    若是你也遇到这个问题,说明你也没有理解tensorflow到底在哪里. 当安装了anaconda3.6后,在PyCharm中设置interpreter,这个解释器决定了你在PyCharm环境中写的代码 ...

  4. javascript将C#json序列化的Date对象转换成正常的Date格式

    function ChangeDateFormat(cellval) { var date = new Date(parseInt(cellval.replace("/Date(" ...

  5. chrome添加离线插件

    1.首先用户点击谷歌浏览器右上角的自定义及控制按钮,在下拉框中选择工具选项,然后点击扩展程序来启动Chrome浏览器的扩展管理器页面. 2.在打开的谷歌浏览器的扩展管理器中用户可以看到一些已经安装程序 ...

  6. js配置文件路径和项目目录文件夹位置的一致性

    在js文件引入的时候注意配置文件的路径是否和项目目录中的文件夹位置一致,如果不一致, 浏览器会指出找不到文件404的情况

  7. php7 pdo抽象类操作数据库

    查询 <?php try { $dbconnect = new PDO('mysql:host=localhost;dbname=pdodatabase','root','753951'); } ...

  8. docker systemctl无法使用

    Dockerfile for systemd base image FROM centos:7 ENV container docker RUN (cd /lib/systemd/system/sys ...

  9. C# .NET 按ASCII 从小到大排序

    //C#的SortedDictionary<string,string>集合对key不是按照ascii码排序的因为他没有区分大小写,这就是个差别. 如果参数名中间有大写,小写,数字,Sor ...

  10. Solr4.7.0连接MySQL

    1.把Mysql的Jar包  例如:mysql-connector-java-5.1.8-bin.jar  或其他版本 放到D:\apache-tomcat-7.0.57\webapps\solr\W ...