zoukankan      html  css  js  c++  java
  • (23)ajax实现上传文件的功能

    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>
  • 相关阅读:
    【作业4】测试作业-兴趣问题清单
    【读后感3】高效程序员的45个习惯
    【作业3】关于C语言的问卷调查
    【作业2】价值观作业
    Spring的零配置
    Spring容器中bean的作用域
    Spring注入方式
    Spring整合Struts2
    my first go
    Struts2对ajax的支持
  • 原文地址:https://www.cnblogs.com/shizhengquan/p/10547395.html
Copyright © 2011-2022 走看看