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. Win10系列：JavaScript 项目模板中的文件和项模板文件

    通过上面内容的学习,相信读者已经对各种项目模板和项模板有了大致的了解,本节将进一步介绍项目模板中默认包含的项目文件以及项模板文件,首先讲解这些文件中的初始内容以及作用,然后介绍在一个页面中如何添加控件 ...

  2. linux 用户/群组/权限

    mv 原文件名 新文件名 #相当于重命名 查看文件内容相关命令 cat #查看文件全部内容 head - n #查看文件前n行内容(默认前十行) tail -n #查看文件后n行内容(默认后十行) t ...

  3. Django ajax提交 登录

    一.url from django.contrib import adminfrom django.urls import pathfrom appo1 import views urlpattern ...

  4. Eclipse集成Tomcat插件（特别简单）

    . 只需要一个jar包 复制到eclipse/plugins文件夹下,重启Eclipse即可看到如下三只小猫 1.修改Tomcat (1)Tomcat version:版本 (2)Tomcat Hom ...

  5. 装饰器-wrapper

    我跟别人说我精通python,别人问我wrapper是啥,我说不知道,尼玛,原来wrapper就是装饰器,熟的不得了啊,英语真是我的克星啊. 闭包 closure 在认识装饰器之前先认识下闭包 闭包, ...

  6. python-tornado和django优缺点

    Django优点: 大和全(重量级框架)自带orm,template,view 需要的功能也可以去找第三方的app注重高效开发全自动化的管理后台(只需要使用起ORM,做简单的定义,就能自动生成数据库结 ...

  7. Eclipse的配置

    1 Eclipse的工作空间和新建工程 1.1: 工作空间 其实就是我们写的源代码所在的目录 1.2: 创建工程(项目) 右键/Package Explore 空白区/new /Java Projec ...

  8. Centos7修改profile文件后导致vi command not find

    Centos7修改profile文件后导致vi command not find,原因是profile文件没有配置正确,系统就无法找到精确命令了.解决方法: 1.在命令行中输入:export PATH ...

  9. ES6 Module的语法

    下面比较一下默认输出和正常输出. // 第一组 export default function crc32() { // 输出 // ... } import crc32 from 'crc32'; ...

  10. Linux 下各个目录的作用及内容

    在 Linux 下,我们看到的是文件夹(目录): 在早期的 UNIX 系统中,各个厂家各自定义了自己的 UNIX 系统文件目录,比较混乱.Linux 面世不久后,对文件目录进行了标准化,于1994年对 ...