• ajax传送文件


    ajax传送文件

    ajax传文件需要注意的事项

    1、利用formdata对象 能够简单的快速的从前端传输数据 (普通键值 +文件),这就是阿贾克斯的优势了。不用分开传了。

    2、有几个参数 :

    ​ 1.data:formdata对象

    ​ 2.contentType:false

    ​ 3.processData:false

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
          <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    
    </head>
    <body>
    <input type="text" name="username" id="t1">
    <input type="text" name="password" id="t2">
    <input type="file" name="myfile" id="t3">
    <button id="b1">提交</button>
    
    <script>
        $('#b1').click(function () {
            // 1.先生成一个formdata对象
            var myFormData = new FormData();
            // 2.朝对象中添加普通的键值
            myFormData.append('username',$("#t1").val());
            myFormData.append('password',$("#t2").val());
            // 3.朝对象中添加文件数据
            // 1.先通过jquery查找到该标签
            // 2.将jquery对象转换成原生的js对象
            // 3.利用原生js对象的方法 直接获取文件内容
            myFormData.append('myfile',$('#t3')[0].files[0]);
            $.ajax({
                url:'',
                type:'post',
                data:myFormData,  // 直接丢对象
                // ajax传文件 一定要指定两个关键性的参数
                contentType:false,  // 不用任何编码 因为formdata对象自带编码 django能够识别该对象
                processData:false,  // 告诉浏览器不要处理我的数据 直接发就行
                success:function (data) {
                    alert(data)
                }
            })
        })
    </script>
    
    </body>
    
    </html>
    

    这里讲述一下自己愚蠢的踩坑:

    既然发送过来了一个文件了,那我就持久化存储一下吧。脑海里开始思索如何保存文件,读取文件等相关知识,发现空荡荡的!

    def upload(request):
        files = request.FILES.get('myfile')
    
        print(request.FILES)
        if request.is_ajax():
            if request.method == 'POST':
                print(request.POST)
                with open(r'D:pythonuntitled上课day62file_downloadhahaha'+'.py','wb')as fw:
                    for f in files:
                        fw.write(f)
                return HttpResponse('收到了 dsb')
    
        return render(request,'upload.html')
    

    再提醒自己一下,读文件,一定是文件,而不是文件夹之类的东西,写文件,路径要是不存在的文件,他会自己创建一个文件,如果是存在文件,将会被覆盖!

    而且最重要的点是,request.FILES不是直接我们要的文件,而是一个

    <class 'django.utils.datastructures.MultiValueDict'>字典,是啥我也不知道,总之需要我们get出来。然后才是二进制类型的文件了。

    序列化组件

    我们之前往前端传数据,是直接从数据库查询出来的一大堆对象,然后丢给前段,前端自己取,这是django支持的,但是要考虑到以后开发,前端不一定会跟你兼容,所以这时候就要使用大家都兼容的数据格式,json。

    所以我们要写成一个列表套字典的形式传给前端,但是用手写会变得非常麻烦,于是就有了一个目前还比较low的模块,但是胜过手写。

    序列化他不只是单单的dumps。

    from app01 import models
    from django.core import serializers #这个模块用来序列化
    def ser(request):
        user_queryset = models.Userinfo.objects.all()
        res = serializers.serialize('json',user_queryset)#前一个参数告诉这个方法要序列化成什么类型的数据,后面的参数就是你要序列化的数据。
        print(res)
        return render(request,'ser.html',locals())
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
          <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    
    </head>
    <body>
    {{ res }}
    </body>
    </html>
    

    前段文件

    [{
    	"model": "app01.userinfo",
    	"pk": 1,
    	"fields": {
    		"username": "chanyuli",
    		"password": 123,
    		"gender": 1
    	}
    }, {
    	"model": "app01.userinfo",
    	"pk": 2,
    	"fields": {
    		"username": "tank",
    		"password": 321,
    		"gender": 1
    	}
    }, {
    	"model": "app01.userinfo",
    	"pk": 3,
    	"fields": {
    		"username": "ax",
    		"password": 720,
    		"gender": 2
    	}
    }]
    

    以上就是前段接受到的数据经过json校验格式化工具(bejson)格式化之后的数据了。

  • 相关阅读:
    vueJs+webpack单页面应用--vue-router配置
    webstorm IDE添加Plugins----添加vue插件
    WebStorm 11、PhpStorm 10免费激活(不需要注册码)
    webpack react基础配置二 热加载
    webpack react基础配置一
    移动端页面去掉click点击 背景色变化
    css美化checkbox radio样式
    ie11媒体查询以及其他hack
    angularJS ng-grid 配置
    网络7. TCP/IP网络之网络接口层
  • 原文地址:https://www.cnblogs.com/chanyuli/p/11761421.html
Copyright © 2020-2023  润新知