利用 Script.form.js 提交文件和表单数据

最新推荐文章于 2025-12-11 16:09:33 发布

原创最新推荐文章于 2025-12-11 16:09:33 发布 · 262 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

javascript 专栏收录该内容

8 篇文章

订阅专栏

枫叶资源网–官网地址
 星际导航–官网地址
 观看新剧点播–官网地址

简单介绍

实现的功能：可以提交表单和文件
缺点：目前兼容性还不太好，因为 FormDate 这个类是比较新的特性，IE8 及之前版本的浏览器不支持

上传头像:

<script>
    // script_form.js
    $("#formjs_btn").on('click', function () {
        var value = $("#sub_file").val()

        if (!value) {
            alert("请先选择文件");
            return false;
        }
        if (!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) {
            alert("文件格式错误");
            return false;
        }
        var inp_one = $("input[type='text']").first().val();
        var inp_two = $("input[type='text']").last().val();
        var option = {
            url: '/ajax-upload/',
            type: 'POST',
            dataType: 'json',
            data: {'one': inp_one, 'two': inp_two},
            headers: { // 把认证信息添加到请求的头部，也能实现认证
                "X-CSRFToken": $.cookie('csrftoken') // 从 cookie 中获取到csrf的值
            }, // 注意这里的 key 必须是这个,这是Django 定义好的
            success: function (data) {
                alert(JSON.stringify(data)); // js 序列化数据，把数据对象转换为字符
            },
            error: function (data) {
                alert("--上传失败,请刷新后重试");
            }
        };

        $("#form0").ajaxSubmit(option); // 使用 script.form.js 上传数据和文件
        return false; // 返回false阻止表单再次提交
    });
</script>

后端接收数据的代码

后端接收数据的代码和第一种或者第二种一样

后端得到的数据

reqpost数据>>: <QueryDict: {'two': ['FormDatatwo', 'FormDatatwo'], 'one': ['FormDataone', 'FormDataone']}>
reqfile数据>>: <MultiValueDict: {'sub_file_name': [<InMemoryUploadedFile: 美女.jpg (image/jpeg)>]}>
接收到的文件>>: 美女.jpg
参数key one 的值>>: FormDataone
参数key two 的值>>: FormDatatwo