form表单上传文件

urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/$',views.index),
    url(r'^upload_file/$', views.upload_file),

]

views.py

from django.shortcuts import render,HttpResponse,redirect
from app01 import models
from django.http import JsonResponse  #这个模块就是向前端返回json格式数据

def index(request):
    return render(request,'index.html')

def upload_file(request):
    '''form表单的文件上传'''
    # file是一个文件对象
    file = request.FILES.get('myfile')  #这个FILES就是指发送过来的所有的文件，是一个字典形式
    files = r'D:\%s'%file.name
    with open(files,'wb')as f:
        for line in file:
            f.write(line)
    return HttpResponse('文件上传成功')

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="/static/jquery-3.3.1.js"></script>
    <title>我是index页面</title>
</head>
<body>
    <h1>form表单实现文件上传</h1>
    {#form 表单上传文件一定要指定method的什么请求，然后enctye要指定格式    #}
    <form action="/upload_file/" method="post" enctype="multipart/form-data">
        <input type="file" name="myfile">
        <input type="submit" value="上传文件">
    </form>
</body>
</html>

Ajax 实现上传文件

PS：用Jquery获取文件，有固定的格式，$('#myfile')就是根据id的名字获取到控件，$('#myfile')[0]就是取到原生的dom，$('#myfile')[0].files就会取到这个框内的所有文件（有可能是多个文件），$('#myfile')[0].files[0]这个取第0个就是我当前传的文件

前后端交互有三种格式：urlencoded、formdata、json

1、默认是urlencoded格式（name=lqz&age=19）

2、上传文件要设置formdata格式

urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/$',views.index),
    url(r'^login/$',views.login),
    url(r'^upload_file/$', views.upload_file),

]

views.py

from django.shortcuts import render,HttpResponse,redirect

def index(request):
    return render(request,'index.html')

def upload_file(request):
    '''form表单的文件上传'''
    file = request.FILES.get('myfile')
    files = r'D:\%s'%file.name
    with open(files,'wb')as f:
        for line in file:
            print(line)
            f.write(line)
    return HttpResponse('文件上传成功')

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="/static/jquery-3.3.1.js"></script>
    <title>我是index页面</title>
</head>
<body>
    <h1>ajax实现上传文件</h1>
    <input type="file" name="myfile" id="myfile">
    <button id="file_upload">点击上传文件</button>

</body>

<script>
    {#ajax要上传文件必须借助FormData这个对象    #}
    $('#file_upload').click(function () {
        {#取到id为file的文件对象#}
        var myfile = $('#myfile')[0].files[0]
        {#生成一个空的FormData对象#}
        var formdata = new FormData()
        {#把文件放到formdata对象中，#}
        formdata.append('myfile',myfile)
        $.ajax({
            url:'/upload_file/',
            type:'post',
            //要上传文件一定要指定这两个参数processData，contentType
            processData:false,  //不要预处理数据
            contentType:false,  //不指定编码格式
            {#如果不写processData，则程序自己会以默认格式urlencode处理数据格式，也会指定默认的编码格式#}
            //formdata这个对象会自己处理数据格式和编码格式

            //直接把formdata对象放入data传到后台
            data:formdata,
            success:function (data) {
                console.log(data)
            }
        })
    })
</script>
</html>

（23）ajax实现上传文件的功能的更多相关文章

  1. Ajax方式上传文件

    用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 For ...

  2. koa2：通过Ajax方式上传文件，使用FormData进行Ajax请求

    koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...

  3. SSM框架下,使用ajax请求上传文件(doc\docx\excel\图片等)

    1.准备工作 1.1.添加上传必要jar包 <dependency> <groupId>commons-io</groupId> <artifactId> ...

  4. ajax异步上传文件和表单同步上传文件 的区别

    1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...

  5. ajax如何上传文件（整理）

    ajax如何上传文件(整理) 一.总结 一句话总结:用FormData,FormData+ajax=异步上传二进制文件 <form enctype="multipart/form-da ...

  6. django中通过文件和Ajax来上传文件

    一.通过form表单来上传文件 1.在html模板中 <form action="/index/" method="post" enctype=" ...

  7. 基于Flask开发网站 -- 前端Ajax异步上传文件到后台

    大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...

  8. 编写Java程序，实现客户端向服务端上传文件的功能

    查看本章节 查看作业目录 需求说明: 实现客户端向服务端上传文件的功能 当启动服务端后,运行客户端程序,系统提示客户在客户端输入上传文件的完整路径.当客户在客户端输入完成后,服务端实现文件上传 实现思 ...

  9. jquery 实现ajax 上传文件的功能（使用插件 ajaxfileupload）

    js文件的下载地址 : http://files.cnblogs.com/wangqc/ajaxfileupload.js 页面代码: <html>    <!-- 引入相关的js文 ...

随机推荐

  1. hash与平衡二叉树的区别

    哈希表的定义:哈希表是一种根据关键码去寻找值的数据映射结构,该结构通过把关键码映射的位置去寻找存放值的地方 https://blog.csdn.net/duan19920101/article/det ...

  2. ROM和RAM区别

    在计算机的组成结构中,有一个很重要的部分,就是存储器.存储器是用来存储程序和数据的部件,对于计算机来说,有了存储器,才有记忆功能,才能保证正常工作.存储器的种类很多,按其用途分为主存储器和辅助存储器, ...

  3. 个人前端学习路线图与github优秀前端开发者的路线图推荐

    1.个人目前学习的路线图 2.github优秀前端开发者的路线图推荐 打开github首页,在搜索框输入developer-roadmap,搜索github前端路线图 选择kamranahmedse/ ...

  4. python之路 ---计算机硬件基础

    计算机(computer)俗称电脑,是现代一种用于高速计算的电子计算机器,可以进行数值计算,又可以进行逻辑计算,还具有存储记忆功能.是能够按照程序运行,自动.高速处理海量数据的现代化智能电子设备.一个 ...

  5. 【收集资料】OpenGL学习

    1.课本配套网站,有Sample Code和书中的图片等   http://math.ucsd.edu/~sbuss/MathCG/ 2.Visual C++的帮助系统可查阅基本OpenGL函数(不包 ...

  6. javascript es6系列教程 - 不定参数与展开运算符(...)

    三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式:  在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...

  7. 重写equals() 和 hashCode()方法

    什么情况下需要重写呢? 比如去重操作时, 有时候往Set集合存放对象User,我们User类的字段太多时,比如有50个字段, 判断两个User对象相同,不需要判断它们所有字段都相同,只需要判断它们的某 ...

  8. EF-关于类库中EntityFramework之CodeFirst(代码优先)的操作浅析

    前有ADO.NET,后有ORM模式的EntityFramework.这两种技术都实现了对数据库的访问操作.如果要说哪种技术好,就看项目架构的大小,使用者的熟练程度等等,毕竟萝卜白菜,各有所爱. 今天要 ...

  9. python验证代理IP

    接上一篇保存的IP地址,进行验证 # -*- coding: utf-8 -*- import requests from threading import Thread import threadi ...

  10. GNU C的定义长度为0的数组

    在标准C和C++中,长度为0的数组是被禁止使用的.不过在GNU C中,存在一个非常奇怪的用法,那就是长度为0的数组,比如Array[0];很多人可能觉得不可思议,长度为0的数组是没有什么意义的,不过在 ...