<!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. docker容器以ROOT账号登录（获取ROOT权限/ROOT密码）

    第一步:查看容器的CONTAINER ID docker ps 第二步:获取root权限,例如需要进入的CONTAINER ID为4650e8d1bcca docker exec -ti -u roo ...

  2. update_engine-DownloadAction(二)

    在update_engine-DownloadAction(一)中对DownloadAction介绍到了DeltaPerformer的Write方法.下面开始介绍Write方法. src/system ...

  3. jdk1.8源码解析（1）：HashMap源码解析

    jdk1.8 HashMap数据结构 图1-HashMap类图 图2-TreeNode类图 由图1-HashMap类图可知HashMap底层数据结构是由一个Node<K,V>的数组构成.具 ...

  4. 第三节 Python基础之数据类型(列表，元组，字典)

    列表,简单说就是用[]括起来的一大堆数据,这些数据我们叫做元素,元素与元素之间用","隔开,这些元素可以是数字,布尔值,字符串,列表等等,基本所有的数据类型都可以放在列表里边,同时 ...

  5. Centos 7 LVM xfs文件系统修复

    Centos 7 LVM xfs文件系统修复 今天一大早,zabbix开始报警了,一台linux主机出现问题. 登陆控制台查看,报如下错误. 解决方法如下: ls -l /dev/mapper xfs ...

  6. shell脚本命令远程连接ssh并执行命令

    环境: redhat 6.5 根据网上提供方法,测试了很多写法都不成功,测试了很久才有了以下脚本. 命令远程连接ssh并执行命令,scp/ftp等远程连接操作同理: #!/usr/bin/expect ...

  7. 为什么比特币和以太坊未必真得比EOS更去中心化？

    在区块链行业里,有两派人一直在争论:一个是以比特币和以太坊为首的社群,另一个是以EOS为首的社群.这两群人一直在争论谁才是真正的未来,双方都认为自己这边更有未来.其中EOS抗争的重点就是100万TPS ...

  8. Python中多个列表与字典的合并方法

    Python中多个列表与字典的合并方法 1多列表的合并 1)a+=b a=['] b = ['] a += b print(a) >>>['] 2) a.extend(b) a=[' ...

  9. MJRefresh在Xode6中报错处理

      MJRefresh在Xcode6中会报错,objc_msgSend(self.beginRefreshingTaget, self.beginRefreshingAction, self),简单调 ...

  10. java异常处理——finally相关

    示例程序1 public class EmbededFinally { public static void main(String args[]) { int result; try { Syste ...