1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <form action="/upload.html" method="POST" enctype="multipart/form-data">
  9.         <input type="text" name="file_name">
  10.         <div style="position: relative">
  11.             <a>点击上传文件</a>
  12.             <input type="file" name="is_file" style="opacity: 0;position: absolute;top: 0;left: 0;">
  13.         </div>
  14.         <input type=submit name="OK">
  15.     </form>
  16. </body>
  17. </html>
  1. from django.shortcuts import render,HttpResponse
  2.  
  3. # Create your views here.
  4.  
  5. def upload(request):
  6.     if request.method == "GET":
  7.         return render(request,"upload.html")
  8.     else:
  9.         #print(request.POST)   #<QueryDict: {'file_name': ['12321321'], 'OK': ['提交']}>
  10.         #print(request.FILES)  #<MultiValueDict: {'is_file': [<TemporaryUploadedFile: 说明书.pdf (application/pdf)>]}>
  11.  
  12.         filename = request.POST.get("file_name")
  13.         isfile = request.FILES.get("is_file") #isfile是对象(内容有文件大小,文件名称,文件内容等)
  14.  
  15.         print(isfile.name,isfile.size)   #isfile.name文件名   #isfile.size文件大小,可以拿这值做限制
  16.  
  17.         f = open('file/'+isfile.name,'wb')
  18.         for data in isfile.chunks():
  19.             f.write(data)
  20.         f.close()
  21.         return HttpResponse("ok")

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

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

  1. def file(request):
        #print(request.FILES)
        #print(request.POST)
        isfile = request.FILES.get("isfile")  # isfile是对象(内容有文件大小,文件名称,文件内容等)
  2.  
  3.     print(isfile)  # isfile.name文件名   #isfile.size文件大小,可以拿这值做限制
  4.  
  5.     f = open('static/' + isfile.name, 'wb')
        for data in isfile.chunks():
           f.write(data)
        f.close()
        return HttpResponse("OK")

　　-jQuery　

　　　　  html代码　

  1. 　　<input type="file" id="pufile">
    　　<a class="btn" onclick="AjaxSubmitFile()">上传</a>
  2.  
  3. jQuery代码
  1. 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内容发过去给服务器就可以了
        })
    }
  1.  

-原生　

  1. 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代码

  1. <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>
  1. function putifrname() {
        document.getElementById("putifrname").submit();//点击putifrname标签,就开始提交
    }

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

Veiw代码:

  1. def file(request):
        print(request.FILES)
        print(request.POST)
        isfile = request.FILES.get("isfile")  # isfile是对象(内容有文件大小,文件名称,文件内容等)
  2.  
  3.     print(isfile)  # isfile.name文件名   #isfile.size文件大小,可以拿这值做限制
  4.  
  5.     f = open('static/' + isfile.name, 'wb')
        for data in isfile.chunks():
           f.write(data)
        f.close()
  6.  
  7.     import os,json
        name = json.dumps(os.path.join("static",isfile.name))
        print(name)
        return HttpResponse(name)

Html代码:

  1. <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>
  2.  
  3. <div id="png"></div>
  4.  
  5. <script>
        function putifrname() {
            document.getElementById('fileifrname').onload = test;     
            document.getElementById("putifrname").submit();    //提交的时候给上面ifrname标签加上 onload=test  让执行完后执行test函数
        }
  6.  
  7.     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)
        }
  8.  
  9. </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. dll被设置为用记事本打开的解决方法

    dll被设置为用记事本打开的解决方法: 打开注册表编辑器 HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Fi ...

  2. git 之路

    1. 不要把配置文件放到你的 Git 代码仓库 https://www.oschina.net/translate/dont-include-configs-in-your-git-repos 2. ...

  3. 使用kingshard遇到的坑

    禁止用mysqldump 连接kingshard, 会导致表锁死 读取NULL值变为文本 通过kingshard连接 select出来的null值变为文本"NULL" kingsh ...

  4. C 运算符, 有符号数据运算,

    1.  b++运算 ; ; a = b++ + b++;printf("a=%d\n",a);printf("b=%d\n",b); 输出结果: a=3 b=3 ...

  5. javascript中的立即执行函数的原理

    形如 ((function Test(a) { //code here... })('Hello')); 被称作立即执行函数. 首先需要了解的是,这并不是一种hack,这是javascript的基本语 ...

  6. 分布式事务（二）Java事务API(JTA)规范

    一.引子 既然出现了分布式场景(DTP模型), 大java也及时制定出一套规范来给各大应用服务器.数据库/mq等厂商使用,以方便管理互通--->JTA闪亮登场.JTA(Java Transact ...

  7. ASP.NET上传文件到远程服务器（HttpWebRequest）

    /// <summary> /// 文件上传至远程服务器 /// </summary> /// <param name="url">远程服务地址 ...

  8. Git 日常操作

    本地新建Git库步骤: 初始化git库:git init 建立本地和远程的关联: git remote add origin ip:端口/ 项目.git 从远程下载所有分支到本地:git  fetch ...

  9. 使用PROC TRANSPOSE过程步对数据集进行转置时如何保持日期变量的时间顺序

    有一个数据集如下所示: 如果直接进行转置. SAS程序: proc transpose data=test out=outx1 (drop=_name_); by id; var amount; id ...

  10. vue 中 相同的路由不会跳转，更改路由的办法

    vue 开发的项目,路由跳转的时候,是相同的路由是不会跳转,页面也不会有更新的 有时候 必须要跳转怎么办, 更改一个参数,num,一直在改变.就可以进入了. this.$router.push({ p ...