二十四、文件上传

合集 - Python全栈（Django）(35)

1.一、计算机初识2024-02-11 2.二、数据概述2024-02-11 3.六、ip地址与子网划分2024-02-11 4.五、网络通信实现2024-02-11 5.四、字符编码2024-02-11 6.三、网络基础2024-02-11 7.十四、MySQL与Django之Model基础2024-02-11 8.十三、Django Admin2024-02-11 9.十二、Django视图函数和模版相关2024-02-11 10.十一、Django url控制系统2024-02-11 11.十、Django静态文件2024-02-11 12.九、Django环境搭建（基于anaconda环境）2024-02-11 13.八、Python开发环境管理2024-02-11 14.七、ip地址配置2024-02-11 15.二十五、JSON跨域2024-02-12

16.二十四、文件上传2024-02-11

17.二十三、Django Serializes2024-02-11 18.二十二、Django之Form组件2024-02-11 19.二十一、分页2024-02-11 20.JS笔记2024-02-11 21.二十、基于Bootstrap和FontAwesome制作页面2024-02-11 22.十九、Ajax和iFrame2024-02-11 23.十八、Django之Http2024-02-11 24.十七、Cookie和Session2024-02-11 25.十六、Django的ORM（二）2024-02-11 26.十五、Django的ORM2024-02-11 27.实践中前端的一些笔记2024-02-12 28.二十六、登录相关2024-02-12 29.二十九、RBAC+动态菜单2024-02-12 30.二十八、XSS2024-02-12 31.JS第三方插件2024-02-12 32.二十七、简单的验证码实现2024-02-12 33.三十二、Django实践的笔记2024-02-13 34.三十一、动态Form2024-02-13 35.三十、Kingadmin2024-02-12

1、普通上传

<body>
  <form action="/upload.html" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="text" name="user"/>
    <input type="file" name="img"/>
    <input type="submit" value="提交"/>
  </form>
</body>

后台保存文件

def upload(request):
    if request.method=='GET':
        return render(request,'upload.html')
    else:
        # obj=UploadForm(request.POST,request.FILES)
        # if obj.is_valid():
        #     user=obj.cleaned_data['user']
        #     img=obj.cleaned_data['img']
        user=request.POST.get('user')
        img=request.FILES.get('img')

        f = open(img.name,'wb')
        for line in img.chunks():
            f.write(line)
        f.close()
        return HttpResponse('OK')

2、页面上传按钮自定义

<input type="file" /> 生成了页面中“选择文件”的按钮样式无法修改。
设置style="opacity : 0”可以把它隐藏，同时仍然可以点击；
添加一个a标签，将它和“选择文件”按钮放在一个div中；
设置文件input框为绝对定位；这样a标签和文件input 就放在一起了

<body>
  <form action="/upload.html" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="text" name="user"/>
    <div style="position: relative">
      <a href="#">nb上传</a>
      <input type="file" name="img" style="opacity: 0.2;position:absolute;top:0;left:0;"/>
    </div>
    <input type="submit" value="提交"/>
  </form>
</body>

3、后端：基于Form对象处理数据

from django.forms import fields

class UploadForm(forms.Form):
    user=fields.CharField()
    img=fields.FileField()

def upload(request):
    if request.method=='GET':
        return render(request,'upload.html')
    else:
        obj=UploadForm(request.POST,request.FILES)
        if obj.is_valid():
        	user=obj.cleaned_data['user']
        	img=obj.cleaned_data['img']

        f = open(img.name,'wb')
        for line in img.chunks():
            f.write(line)
        f.close()
        return HttpResponse('OK')

4、ajax文件上传

function AjaxSubmit6(){
  // document.getElementById('img').files[0] 获取已选择的文件对象
  var data = new FormData(); //使用FormData来POST时，不需要设置请求头
  data.append('k1','v1');
  data.append('k2',document.getElementById('img').files[0]);
  $.ajax({
    url:'/ajax1.html',
    type:'POST',
    data:data,
    success:function(arg){
      console.log(arg)
    },
    processData:false, // tell jQuery not to process the data
    contentType:false, // tell jQuery not to set contentType
  })
}

function AjaxSubmit7(){
            var xhr = new XMLHttpRequest();
            // send之前设置回调函数
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4){
                    // 接受完毕服务器返回的数据
                    console.log(xhr.responseText);
                }
            };
            var data = new FormData();
            data.append('k1','v1');
            data.append('k2',document.getElementById('img').files[0]);
            xhr.open('POST','/ajax1.html');
            xhr.send(data);
        }

5、基于Iframe+Form上传文件

添加一个隐藏的iframe元素，将form的target=iframe的name，这样form表单提交数据就会通过iframe来提交；
设置文件的input元素属性onchange，选择了文件就会调用onchange的函数，从而让iframe绑定onload函数，并提交数据；
后台保存文件成功后将文件路径返回给页面，iframe加载到数据会调用onload函数，将文件（图片）路径拿到，创建img元素来展示，从而实现预览。

<body>
  <div>
    <h6>基于Iframe+Form上传文件</h6>
    <iframe style="display: none;" id="iframe1" name="ifra1"></iframe>
    <form id="fm1" action="/upload_img.html" method="post" enctype="multipart/form-data" target="ifra1">
      <input type="file" name="k1" onchange="uploadFile();"/>
    </form>
    <h3>预览</h3>
    <div id="previews">
    </div>
  </div>
  <script src="/static/jquery-3.1.1.js"></script>
  <script>
    function reloadIframe1() {
      var ret= this.contentWindow.document.body.innerHTML;
      var obj = JSON.parse(ret);
      console.log(obj.data);
      var tag = document.createElement('img');
      tag.src = obj.data;
      $('#previews').empty().append(tag);
    }
    function uploadFile(){
      document.getElementById('iframe1').onload = reloadIframe1;
      document.getElementById('fm1').submit();
    }

  </script>

def upload_img(request):
    import os
    import uuid

    nid = str(uuid.uuid4())
    ret={'status':True,'data':None,'message':None}
    obj=request.FILES.get('k1')
    file_path = os.path.join('static', nid+obj.name)
    f = open(file_path,'wb')
    for line in obj.chunks():
        f.write(line)
    f.close()
    ret['data'] = file_path
    return HttpResponse(json.dumps(ret))

posted @ 2024-02-11 23:48 Bruce_JRZ 阅读(9) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 十九、Ajax和iFrame

· JS第三方插件

· 26.-文件上传

· 27、Django-文件上传

· 文件的上传与下载

阅读排行：
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库

公告

昵称： Bruce_JRZ
园龄： 9年7个月
粉丝： 2
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

2024年2月(54)

Bruce