主要内容：

一、文件长传的三种方式

二、简单预览功能实现

一、form表单上传

1.页面代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="{% url 'upload' %} " method="post" enctype="multipart/form-data">

    {% csrf_token %}

    <input type="file" name="img">

    <input type="submit">

</form>

</body>

</html>

2.后端view函数处理

def upload(request):

    if request.method=="GET":

        return  render(request,'upload.html')

    elif request.method=="POST":

        res={"status":"success","code":999}

        img_obj=request.FILES.get('img')#获取文件对象

        with open(os.path.join('static',img_obj.name),"wb") as f:

            for chunk in img_obj.chunks(chunk_size=1024):

                f.write(chunk)

        return HttpResponse(json.dumps(res))
二、利用Jquery中ajax+FormData实现上传文件

FormData使用方式：

  • 创建一个空的FormData对象，然后再用append方法逐个增加键值对

　　var formdata = new FormData();
　　formdata.append("name","xx");
　　formdata.append("flie", filename);

  • 取得form元素对象，将它作为参数传入FormData对象中。

　　var formOjb = document.getElementById("form");
　　var formdata = new FormData(formOjb );

  • 利用form元素对象的getFormData方法生成它

　　var formobj = document.getElementById("form");
　　var formdata = formobj.fetFormData();

1.页面代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="{% url 'upload' %} " method="post" enctype="multipart/form-data">

    {% csrf_token %}

    <input type="file" name="img">

</form>

<span style="padding: 5px;color: royalblue" onclick="Jqajax();">jq上传</span>

<script type="text/javascript" src="/static/jquery-2.1.1.min.js"></script>

<script type="text/javascript" src="/static/jquery.cookie.js"></script>

<script>

    function Jqajax() {

       var file_obj=$('input[name="img"]')[0].files[0];//获取dom形式的文件对象

       var form_obj=new FormData();   //创建formdata对象

       form_obj.append('img',file_obj);   //将文件对象加载formdata中

        $.ajaxSetup({                     //设置csrf_token

            beforeSend: function (xhr, settings) {

                    xhr.setRequestHeader("X-CSRFToken", $.cookie("csrftoken"));

            }

        });

       $.ajax({

           type: 'POST',

           url: '{% url 'upload' %}',

           data: form_obj,//指明发送的文件对象

           processData: false, // 告诉jquery要传输data对象

           contentType: false,   // 告诉jquery不需要增加请求头对于contentType的设置

                success: function (data) {

                    console.log(data)

           }

       })

    }

</script>

</body>

</html>

后端处理逻辑不变

三、基于iframe实现伪ajax文件上传

原理：iframe数据提交不刷新页面

好处：通过iframe的src属性进行上传功能，这样的好处不用依赖FormData对象，低版本浏览器可能不支持该对象。

前端页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

 <form action="{% url 'upload' %}" method="post" target="iframe_1" enctype="multipart/form-data">

     {% csrf_token %}

        <iframe style="display: none"  id="iframe_1" name="iframe_1" src=""></iframe>

        <input type="file" name="img" />

        <input type="submit" onclick="iframeSubmmit();" value="iframe上传"/>

    </form>

<script type="text/javascript" src="/static/jquery-2.1.1.min.js"></script>

<script type="text/javascript" src="/static/jquery.cookie.js"></script>

<script>

function iframeSubmmit() {

 $('#iframe_1').load(function () {//用户获取上传成功以后的返回值

    var text=$('#iframe_1').contents().find('body').text();

    var obj=JSON.parse(text);

    console.log(obj) ;

 })

}

</script>

</body>

</html>

后端处理逻辑一样

四、图片预览功能

原理：通过图片上传时候服务端返回文件路径，然后使用js设置a标签src属性实现预览功能

后端代码：

def upload(request):

    if request.method=="GET":

        return  render(request,'upload.html')

    elif request.method=="POST":

        img_obj=request.FILES.get('img')#获取文件对象

        file_path=os.path.join('static',img_obj.name)

        res={"status":"success","code":999,"file_path":file_path}

        with open(os.path.join(file_path,"wb") as f:

            for chunk in img_obj.chunks(chunk_size=1024):

                f.write(chunk)

        return HttpResponse(json.dumps(res))

Django文件上传三种方式以及简单预览功能的更多相关文章

  1. 头像截图上传三种方式之一（一个简单易用的flash插件）（asp.net版本）

    flash中有版权声明,不适合商业开发.这是官网地址:http://www.hdfu.net/ 本文参考了http://blog.csdn.net/yafei450225664/article/det ...

  2. python_way day21 Django文件上传Form方式提交，原生Ajax提交字符处啊，Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式，Django验证码，抽屉示例，

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  3. django文件上传、图片验证码、抽屉数据库设计

    1.Django文件上传之Form方式 settings.py, ALLOWED_HOSTS = ['*'] INSTALLED_APPS = [ 'django.contrib.admin', 'd ...

  4. 文件上传三：base64编码上传

    介绍三种上传方式: 文件上传一:伪刷新上传 文件上传二:FormData上传 文件上传三:base64编码上传 Flash的方式也玩过,现在不推荐用了. 优点: 1.浏览器可以马上展示图像,不需要先上 ...

  5. Ajax文件上传三式

    文件上传(三式) 1.urls.py文件 url(r'^upload.html$', views.upload), 2.views.py文件 import os def upload(request) ...

  6. Django文件上传下载与富文本编辑框

    django文件上传下载 上传 配置settings.py # 设定文件的访问路径,如:访问http://127.0.0.1:8000/media/就可以获取文件 MEDIA_URL = '/medi ...

  7. 文件批量上传-统一附件管理器-在线预览文件(有互联网和没有两种)--SNF快速开发平台3.0

    实际上在SNF里使用附件管理是非常简单的事情,一句代码就可以搞定.但我也要在这里记录一下统一附件管理器能满足的需求. 通用的附件管理,不要重复开发,调用尽量简洁. 批量文件上传,并对每个文件大小限制, ...

  8. Python菜鸟之路：Django 文件上传的几种方式

    方式一:通过form表单中,html input 标签的“file”完成 # 前端代码uoload.html <form method="post" action=" ...

  9. Django文件上传（经典上传方式）

    经典文件上传方式 创建URL from django.contrib import admin from django.urls import path from django.conf.urls i ...

随机推荐

  1. python中的if __name__=='__main__': main()解析

    python中我们会看到一段代码是这样的: if __name__=='__main__': main() 这段代码的什么意思,我们可以知道代码的意思是如果__name__=='__main__'为T ...

  2. 如何用Fritzing实现元器件自定义接线图

    在用Micropython开发板完成小实验时,很多朋友反应对照接线图实际接线有时会有一些困扰.今天给大家介绍一款画图软件Fritzing   看看是怎么自定义制作接线图的. 前提条件 1.准备好元器件 ...

  3. angular4.0微信oAuth第三方认证的正确方式

    当我们的项目运行在微信端时,用到oAuth第三方认证.问题来了,在ng4中微信认证应该放在哪里呢? 开始项目的时候,我将oAuth认证放在了每个页面模版中,发现返回历史页的时候,需要返回两次. 这个问 ...

  4. javascript 之作用域链-10

    前言 在<执行环境>文中说到,当JavaScript代码执行一段可执行代码时,会创建对应的执行上下文(execution context). 变量对象(Variable object,VO ...

  5. Python可视化库Matplotlib的使用

    一.导入数据 import pandas as pd unrate = pd.read_csv('unrate.csv') unrate['DATE'] = pd.to_datetime(unrate ...

  6. 19 Zabbix 利用Scripts栏目对Hosts远程执行命令

    点击返回:自学Zabbix之路 19 Zabbix 利用Scripts栏目对Hosts远程执行命令 在Monitoring板块中,有Host出现的地方,单击Host按钮后,都可以执行对Host远程执行 ...

  7. 编码(ACSII unicod UTF-8)、QT输出中文乱码深入分析

    总结: 1. qt输出中文乱码原因分析 qt的编程环境默认是utf-8编码格式(关于编码见下文知识要点一): cout << "中文" << endl; 程 ...

  8. eclipse导入工程时，出现Some projects cannot be imported because they already exist in the workspace

    前提条件: 1.将eclipse中现有的工程javatraining删除,如下图所示, 该复选框不要勾选,点击ok steps: 1.本次打开Eclipse想要把已删除的javatraining工程再 ...

  9. （5编译使用最新opencv）从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练

    从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练 1综述http://www.cnblogs.com/jsxyhelu/p/7907241.html 2环境架设http://www.c ...

  10. 多个JDK使用批处理命令切换JDK版本

    本篇博客参考的链接 http://blog.csdn.net/hu199055/article/details/70145389 https://www.cnblogs.com/xdp-gacl/p/ ...