首页 > 其他分享 ># jquery # form表单上传文件

# jquery # form表单上传文件

时间:2023-04-22 11:44:23浏览次数:49  
标签:jquery form request upload 表单 path import django 上传

form表单上传文件

<form action="/upload/" method="post" enctype="multipart/form-data">
   头像: <input type="file" name="head-pic">
    用户名: <input type="text" name="username">
    <input type="submit">
</form>
views:
def upload(request):
    if request.method=="GET":
        return render(request,'upload.html')
    else:
        print(request.POST) #拿到的是post请求的数据,但是文件相关数据需要用request.FELES去拿
        print(request.FILES)
        #<MultiValueDict: {'head-pic': [<InMemoryUploadedFile: p2.jpg (image/jpeg)>]}>
        file_obj=request.FILES.get('head-pic')
        print(file_obj)
        print(file_obj.name)
        file_name=file_obj.name
        import os
        path=os.path.join(settings.BASE_DIR,'static','img',file_name)
        with open(path,'wb') as f:
            for i in file_obj:
                f.write(i)
        # f=open('xx.txt','rb')
        # with open('xx.txt','wb') as f2:
        #     for i in f:
        #         f2.write(i)

        return HttpResponse('ok')

文件上传

settings.py中配置文件上传的路径

#上文件的目录
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media')
from django.contrib import admin
from django.urls import path, include
from . import views
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('upload/', include('upload_app.urls')),
]
#文件上传的路径
urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

三、代码编写

以下代码都在uoload_app目录下

3.1、models.py

这里的模型文件的picture会直接映射图片上传的相对位置

from django.db import models

# Create your models here.

class Content(models.Model):
    title = models.FileField('文章名称',max_length=11)
    picture = models.FileField(upload_to='picture')

3.2、views.py

from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.

#上传文件
from upload_app.models import Content


def test_upload(request):
    if request.method == 'GET':
        return render(request, 'upload_app/test_upload.html')
    elif request.method == 'POST':

        title = request.POST['title']
        myfile = request.FILES['myfile']

        Content.objects.create(title=title,picture=myfile)
        return HttpResponse('----上传成功!')

3.3、urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('upload', views.test_upload),
]

form.html

<form action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <p><input type="text" name="title"></p>
   <p> <input type="file" name="myfile"></p>
   <p><input type="submit"></p>
</form>
<form action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <p><input type="text" name="title"></p>
   <p> <input type="file" name="myfile"></p>
   <p><input type="submit"></p>
</form>

 

 

 

 

 

 

 

标签:jquery,form,request,upload,表单,path,import,django,上传
From: https://www.cnblogs.com/mengdie1978/p/17342696.html

相关文章

  • AntdPro中formItemProps和fieldProps的区别
    title:AntdPro中formItemProps和fieldProps的区别date:2023-04-1312:50:23tags:["React","AntDesign"]categories:["前端篇"]最近在工作中接触到了antd和antdpro,作为一个react和antd新人,在学习和使用中遇到了不少的问题,下边就常见的一个问题来进行记录,后......
  • 深入了解 Transformers – Part 1: 介绍 Transformer 模型
    动动发财的小手,点个赞吧!自从最新的LargeLanguageModels(LLaM)发布以来,如OpenAI的GPT系列、开源模型Bloom或谷歌发布的LaMDA等,Transformer展现出了巨大的潜力,成为了深度学习的前沿架构楷模。尽管已经有几篇文章介绍了transformer及其背后的数学原理,但在本文中,我想结合我认为最......
  • Django框架——静态文件配置、form表单、request对象、连接数据库、ORM简介、ORM基本
    配置文件介绍SECRET_KEY='0yge9t5m9&%=of**qk2m9z^7-gp2db)g!*5dzb136ys0#)*%*a'#盐DEBUG=True#调试模式,等项目上线的时候,改成False#配置数据库DATABASES={'default':{'ENGINE':'django.db.backends.sqlite3',#默认是自......
  • Vue:表单双绑、组件
    vue一大精髓就是双向绑定vue.js是一个mvvm框架,即数据的双向绑定,即当数据发生变化时的时候,视图也就发生变化,当视图发生变化时,数据也会同步变化双向绑定是对于UI控件来说的,非UI控件不会涉及到数据的双向绑定以input标签举例<divid="app">输入的文本:<inputtype="text"v-......
  • 前端之jQuery
    目录jQuery简单介绍jquery介绍jQuery的优势jQuery内容jQuery版本jQuery下载引入方式jQuery对象jquery基础语法标签对象和jQuery对象jquery对象转为标签对象标签对象转为jquery对象学习jQuery的步骤查找标签基本选择器组合选择器基本筛选器属性选择器表单筛选器:筛选器方法元素有关......
  • 1000层的Transformer,诞生了!
    卖萌屋今日学术精选大家好,我是卖萌酱。今天下午卖萌屋作者群里一位MILA实验室的大佬在临睡前(蒙特利尔时间凌晨0点半)甩出来一篇论文:大佬表示太困了,肝不动了,于是卖萌酱左手抄起一罐咖啡,右手接过论文就开始肝了,必须第一时间分享给卖萌屋的读者小伙伴们!论文链接:https://arxiv.org/pdf/......
  • jquery DOM型漏洞
    1、漏洞介绍漏洞编号:CVE-2016-7103、CVE-2015-9251、CVE-2014-6071、CVE-2012-6708、CVE-2011-4969漏洞环境:jquery影响范围:1.x系列版本等于或低于1.12的jQuery2.x系列版本等于或低于2.2的jQuery漏洞原理:$(val)形式的jquery代码,由于某些版本的jquery的解析规则存在漏洞,导......
  • jQuery的遍历-prev()和next()方法(购物车数量加减)
    jQuery的遍历-prev()和next()方法<divclass="box"id="box"><ahref='#'class="a"><inputtype="text"class="atxt"value="1"><ahref='#'class="......
  • 如何在 .NET Core WebApi 中处理 MultipartFormDataContent 中的文件
    在上一篇文章(如何在.NETCoreWebApi中处理MultipartFormDataContent)中,我们有描述过如何以最简单的方式在.NETCoreWebApi中处理MultipartFormDataContent。基于框架层面的封装,我们可以快速的从Request.Form中分别拿到文件内容和文本内容,但是这些默认的解析方式都是建......
  • TransformMine图像表格化构建系统
    今日团队任务:图片转excel(5天)前端开发(需团队风格统一)调用接口(后端),json数据->excel前后端连接           任烁玚(进行中)            图片转html(8天)前端开发(需团队风格统一)图片转为pdf(存储)pdf转html(调用接口)[html存储到数据库]前后台数据同......