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. Ubuntu16.10下使用VSCode开发.netcore

    按照通常的套路,首先创建一个空白的解决方案,需要用到.netcore sdk命令: dotnet new sln -o dotnetcore_tutrorial 这个时候可以看到在目标目录下生成了一个 ...

  2. Java Web(四) 过滤器Filter

    Filter概述 Filter意为滤镜或者过滤器,用于在Servlet之外对request或者response进行修改.Filter提出了过滤链的概念.一个FilterChain包括多个Filter. ...

  3. day33 线程的创建 验证线程之间共享数据 守护线程 线程进程效率对比 锁 死锁 递归锁

    今日内容: 1.线程理论 2.锁: 牺牲了效率,保证了数据的安全(重点) 3.守护线程 4.GIL锁:(重点) 5.计算密集型和IO密集型 6.信号量,事件(了解) 7.补充. 子进程中不能input ...

  4. lnmp 基础设置

    1.设置ci.tp.laravel重写,去掉index.php location / { try_files $uri $uri/ /index.php?$query_string; } 2.开启ph ...

  5. 【转载一】Grafana –美观、强大的可视化监控指标展示工具

    在之前的InfluxDB系列教程 中,我们给大家介绍了当下流行的一款时序数据库--InfluxDB. 接下来给大家带来一款强大的,与InfluxDB搭配使用的前端指标项展示项目--Grafana. G ...

  6. hustoj 管理员和后台设置

    之前用过hustoj 的livecd版本,觉得有一些小问题,所以从头到尾搭建.主要包含的过程包括: 安装ubuntu系统 搭建hustoj 管理员和后台资源建设 本文介绍如何在搭建好hustoj的基础 ...

  7. jq demo--横向+展开菜单，支持m站

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. Core Java 面经

    1  面向对象的特征有哪些方面? (1)抽象,抽象就是忽略与当前目标无关的部分,抽象包含两个方面,一是过程抽象,一是数据 (2)继承,是Java中允许和鼓励类重用的思想的体现,, 它提供了一种方式,可 ...

  9. day 67 django orm的基础

    django项目 安装: 创建项目 配置(setting,static,csrf) 创建app,python manage.py startapp app1 三部分 urls.py路由配置 1,普通正 ...

  10. 用optional取代null

    Java8引入了java.util.Optional<T>,它是一个封装的Optional值的类.变量存在时,Optional类只是对类简单封装.变量不存在时,缺失的值会被建模成一个空的O ...