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. ID基本操作（新建文档，页面编码）5.8

    “文件”“新建”“文档”选择页数,页面大小.页面方向,“边距和分栏”设置上下左右的边距,栏数,如三栏 还可以改变分栏距离·改变排版方向,如图,垂直 单击“页面”可以查看我们的页面情况 超过两页会可以看 ...

  2. python 自然语言处理（四）____词典资源

    词典或者词典资源是一个词和/或短语及其相关信息的集合,例如:词性和词意定义等相关信息.词典资源附属于文本,而且通常在文本的基础上创建和丰富.下面列举几种nltk中的词典资源. 1. 词汇列表语料库 n ...

  3. UVa 3602 - DNA Consensus String 水题 难度: 0

    题目 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...

  4. IDEA教程之导入maven项目

    通过从网上的开源项目下载源码,一般都是maven管理的项目,此类项目可以通过导入快捷运行项目,如图为下载的一个项目: 2 打开IDEA,点击第二个选项“Import Porject”,然后选择源码根目 ...

  5. jenkins部署java项目在本地（三）

    (1)新建maven构建的java项目 pom.xml的配置 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns ...

  6. selenium（六）Headless Chrome/Firefox--PhantomJS停止支持后，使用无界面模式。

    简介: 以前都用PhantomJS来进行无界面模式的自动化测试,或者爬取某些动态页面. 但是最近selenium更新以后,'Selenium support for PhantomJS has bee ...

  7. 每天CSS学习之color

    color意为颜色,其作用是设置字体的颜色. 设置颜色的方式有以下几种: 1.使用颜色单词,如:red: 2.使用十六进制,如:#FFFFFF: 3.使用rgb(255,0,0); 让我们来实践一下, ...

  8. Oracle与MySQL的SQL语句区别

    2 表 2.1 创建表(同) create table tableName( columnName1 int, columnName2 int ) 2.2 删除表(异) MySQL: drop tab ...

  9. bootstarp3

    1.布局 样式  col-**-1    最大为col-lg-12 表示最大 2.下拉框   .dropdown 下拉菜单(Dropdown)插件 https://github.com/danielf ...

  10. Centos7下cratedb数据导入导出copy to copy from

    crate 创建表结构: 查看表: show tables; 创建表结构: create table tablename (k1 type,k2 type,k3 type);  (type = int ...