文件上传三种方式_WangJY.的博客-程序员ITS304_文件上传

技术标签: python  文件  

需求
上传图片在页面显示

Form表单上传

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form method="POST" action="/upload.html" enctype="multipart/form-data">
      <input type="text" name="user" />
      <input type="file" name="fafafa" />
      <input type="submit" value="提交" />
  </form>

  <div>
      {% if img %}
          <img style="height: 200px;width: 200px;" src="/{
   { img }}" />
      {% endif %}
  </div>
  <script src="/static/jquery-2.1.4.min.js"></script>
  
</body>
</html>

//后台代码
from django.shortcuts import render
import os
def upload(request):
  if request.method == 'GET':
      return render(request,'upload.html')
  elif request.method == "POST":
      user = request.POST.get('user')
      fafafa = request.POST.get('fafafa')
      obj = request.FILES.get('fafafa')

      file_path = os.path.join('static','upload',obj.name)
      f = open(file_path, 'wb')
      for chunk in obj.chunks():
          f.write(chunk)
      f.close()
      ret = {'status': True, 'path': file_path}
      return render(request,"upload.html",{'img':file_path})

缺点:上传后整个页面会刷新,不好

Ajax上传

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .container img{
          width: 200px;
          height: 200px;
      }
  </style>
</head>
<body>
  <input ID="v1" name="user" placeholder="用户">
  <input type="file" name="fafafa" id="img" />
  <input type="button" value="提交XML" "UploadXML()" />
  <input type="button" value="提交JQ" "Uploadjq()" />
  <div id="imgs">

  </div>
</body>
  <script src="/static/jquery-2.1.4.min.js"></script>
  <script>
      function UploadXML() {
          var dic = new FormData();
          dic.append('user', $('#v1').val());
          dic.append('fafafa', document.getElementById('img').files[0]);

          var xml = new XMLHttpRequest();
          xml.open('post', '/upload.html', true);
          xml.onreadystatechange = function () {
              if(xml.readyState == 4){
                  var obj = JSON.parse(xml.responseText);
                  console.log(obj)
                  if(obj.status){
                      var img = document.createElement('img');
                      img.src = "/" + obj.path;
                      document.getElementById("imgs").appendChild(img);
                  }
              }
          };
          xml.send(dic);
      }
      function Uploadjq() {
          var dic = new FormData();
          dic.append('user', $('#v1').val());
          dic.append('fafafa', document.getElementById('img').files[0]);

          $.ajax({
              url: '/upload.html',
              type: 'POST',
              data: dic,
              processData: false,  // tell jQuery not to process the data
              contentType: false,  // tell jQuery not to set contentType
              dataType: 'JSON',
              success: function (arg) {
                  if (arg.status){
                      console.log("111")
                      var img = document.createElement('img');
                      img.src = "/" + arg.path;
                      $('#imgs').append(img);
                  }
              }
          })

      }
  </script>

</body>
</html>

/后台代码
from app01 import models
import json

from django.shortcuts import render,HttpResponse
import os,json
def upload(request):
  if request.method == 'GET':
      return render(request,'upload.html')
  elif request.method == "POST":
      user = request.POST.get('user')
      print(user)
      fafafa = request.POST.get('fafafa')
      obj = request.FILES.get('fafafa')

      file_path = os.path.join('static','upload',obj.name)
      f = open(file_path, 'wb')
      for chunk in obj.chunks():
          f.write(chunk)
      f.close()
      ret = {'status': True, 'path': file_path}
      return HttpResponse(json.dumps(ret))

实现了异步刷新,但是部分老版本的浏览器不支持FormData对象

基于iframe实现form提交

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .container img{
          width: 200px;
          height: 200px;
      }
  </style>
</head>
<body>
  <h1>基于iframe实现form提交</h1>
  <form action="/upload.html" method="post" target="iframe_1" enctype="multipart/form-data">
      <iframe style="display: none"  id="iframe_1" name="iframe_1" src="" "loadIframe();"></iframe>
      <input type="text" name="user" /><br>
      <input type="file" name="fafafa" />
      <input type="submit" value="提交" />
  </form>
  <div id="imgs">

  </div>
</body>
  <script src="/static/jquery-2.1.4.min.js"></script>
  <script>
      function loadIframe() {
          console.log(1);
          // 获取iframe内部的内容
          var str_json = $('#iframe_1').contents().find('body').text();
          var obj = JSON.parse(str_json);
          if (obj.status){
              var img = document.createElement('img');
              img.src = "/" + obj.path;
              $('#imgs').append(img);
          }
      }
  </script>

</body>
</html>
///后台代码
from django.shortcuts import render,HttpResponse
import os,json
def upload(request):
  if request.method == 'GET':
      return render(request,'upload.html')
  elif request.method == "POST":
      user = request.POST.get('user')
      print(user)
      fafafa = request.POST.get('fafafa')
      obj = request.FILES.get('fafafa')

      file_path = os.path.join('static','upload',obj.name)
      f = open(file_path, 'wb')
      for chunk in obj.chunks():
          f.write(chunk)
      f.close()

      ret = {'status': True, 'path': file_path}

      return HttpResponse(json.dumps(ret))
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44266650/article/details/88871884

智能推荐

基于多重继承与信息内容的知网词语相似度计算 - 论文及代码讲解_机智翔学长的博客-程序员ITS304

论文:《基于多重继承与信息内容的知网词语相似度计算》-2017-张波,陈宏朝等 查看代码:https://github.com/yaleimeng/Final_word_Similarity总体感受:太乱了,有可能是之前没怎么接触这块。看论文,搞不懂怎么回事,义项、义原是啥,怎么这么多定义,到头来还是不懂两个词的相似度怎么计算,比哈工大词林那篇论文复杂多了。看代码,函数调来调去,一会这个...

《计算机操作系统》重点知识笔记整理(一)_Barry Yan的博客-程序员ITS304_计算机操作系统笔记

《计算机操作系统》重点知识总结1(1-4章)????注意:​ 这篇总结文档参考的配套书籍为《计算机操作系统》(第四版) 相关知识点关联的页码可能只与本书配套。????说明:​ 由于时间关系,该总结的部分知识点可能有所疏落或存在错误,请认真研读不要盲目学习,读者如有补充或问题更正请联系作者[[email protected]],作者将会表示感谢!​ 最后,希望尊重作者劳动成果,请大家转载时注明出处,Thanks!????第一章 操作系统引论1 操作系统的定义

高斯模糊(高斯滤波)原理以及计算过程_StriveZs的博客-程序员ITS304_高斯模糊公式

高斯模糊/高斯滤波通常,图像处理软件会提供模糊滤镜,使图片产生模糊效果。模糊的算法有很多,其中有一种叫高斯模糊(Gaussian Blur),它将正态分布用于图像处理。文本介绍了高斯模糊的算法,你会看到这是一个非常简单易懂的算法。本质上,它是一种数据平滑技术(data smoothing),适用于多个场合,图像处理恰好提供了一个直观的应用实例。高斯模糊的原理所谓模糊,可以理解成每一个像素都取周边像素的平均值。上图中,2是中间点,周边点都是1.中间点取周围点的平均值之后,就会从2变成了1.

ubuntu安装mysql离线包_lmlby的博客-程序员ITS304

Ubuntu安装mysql离线包测试环境:ubuntu12.04-amd64Mysql离线包:mysql-5.5.25-linux2.6-x86_64.tar.gz官方安装步骤如下:注意事项:如果执行scripts/mysql_install_db –user=mysql时出现如下错误:InstallingMySQL system tables..../bin/mysq

MySQL学习之子查询、合并查询结果、别名_MakerGaoGao的博客-程序员ITS304

学习峰哥java教程自学笔记:http://www.java1234.com/javaxuexiluxiantu.html表结构如下:t_book:t_booktype:t_price:1、带in关键字的查询(在后面的查询结果中查询前面的)SELECT * FROM t_book WHE

checkbox实现全选的多种方法_墙角的爬山虎的博客-程序员ITS304_checkbox全选

&lt;script language=javascript&gt; //第一种方法 function selectall1() { var a = document.getElementsByTagName("input"); if(a[0].checked==true){ for (var i=0; i&lt;a.length; i++) if (a[i].type == "checkbox") a[i].checked = false; }

随便推点

EXT4.0 (4~9章)学习资料_clever027的博客-程序员ITS304

第四章 MVC学习 从这个图中我们可以很清楚的看到M 、V、C在ExtJS4.0里面所对应数据类型。 靠右边是对应的代码结构。 下描述一下这model、store、view、controller以及application这几者之间的关系。(1)application:它是MVC的入口,用来告诉ExtJS到那里去找对应js文件以及启动加载controlle

2021年华为认证考试费用是多少_20004的博客-程序员ITS304_华为ip证书多少钱

有一些朋友打算在2021年参加华为网络工程师这方面的考试,所以想知道这方面的考试费用是多少,自己好有一个准备,那么网络工程师成长日记,作者小编来给大家介绍好让大家有一个准备如果你是找工作为目的的话,一般来说你至少要考华为hcip,也就是中级网络工程师以上这个认证,如果你非常清楚华为的初级,中级高级这三个级别,那么你也可以把最高级别这个认证作为你的考试目标所以首先你要考哪个级别是你需要自己心里清楚的华为的初级考试费用也就是1000多块钱华为的中级考试费用是480美金,折合成人民...

Flutter筑基——学好 Dart,才能玩转 Flutter_willwaywang6的博客-程序员ITS304

目录前言正文Dart 开发环境的搭建最后参考前言我们知道 Flutter 这个 UI 框架是使用 Dart 语言开发的,这说明要玩转 Flutter,就要先学好 Dart。那么,怎么学好 Dart 呢?有的同学抱着“不就是一门语言嘛”的心态,直接开始写 Flutter,然后遇到问题了,再去查看 Dart 的文档。这也是一种学习 Dart 的方式,但这种方式可能不适合大多数同学。庆幸地是,可以去查看 Dart 官网上的示例,比如Language-tour,就讲解了 Dart 的语法。但是,官网上的

破解使用radius实现802.1x认证的企业无线网络_Sword-heart的博客-程序员ITS304

0x01前言概述针对开放式(没有密码)无线网络的企业攻击,我个人感觉比较经典的攻击方式有2种,一种是eviltwin,一种是karma。karma应该是eviltwin攻击手法的升级版,攻击者只需要简单的监听客户端发的ssid探测和响应包就可以实现中间人了,受害者很少会有察觉。而且坊间曾有一个错误的认识,认为隐藏的ssid是不受karma影响的。但是实际情况是,客户端如果曾经连接过隐藏的ssid,也会广播这些网络的探测包。尽管karma这种攻击方式已经有10多年的历史了,但是在MAC OSX,ubunt

ffmpeg代码分析(1)--编译裁剪_茜茜她老爹的博客-程序员ITS304_ffmpeg 裁剪编译

我们很少使用到ffmpge完整的功能库,大部分时候,只需要特定的编解码 传输协议,那么该怎么裁剪ffmpeg呢?答案就是configure命令。configure 是一个文本文件,打开以后我们会发现它有很多命令,如下Help options:  --help                   print this message  --list-decoders        

推荐文章

热门文章

相关标签