终于搞定了 django 的 ajax 方式上传图片

最新推荐文章于 2025-01-15 09:57:04 发布

nchen123

最新推荐文章于 2025-01-15 09:57:04 发布

阅读量5.1k

点赞数

分类专栏： Python 文章标签： django ajax function jquery iframe file

本文链接：https://blog.youkuaiyun.com/inelm/article/details/4612917

版权

Python 专栏收录该内容

53 篇文章

订阅专栏

本文记录了使用 jQuery 的 AjaxFileUpload 插件在 Django 中实现 AJAX 图片上传的过程及遇到的问题。调试中遇到包括文件输入框 name 属性缺失等低级错误，并分享了解决方案。在客户端，通过动态创建 iframe 和 form 实现文件上传，而在服务器端，Django view 可通过 request.FILES.values()[0] 获取上传文件。目前尚存在的问题是多个上传表单的等待提示图标同步问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天终于搞定了 django 的 ajax 方式上传图片。

客户端我用的是 jQuery 的插件 AjaxFileUpload, 其原理是动态创建一个 iframe 和一个 form, 将 <input type="file" /> 控件的内容插入到 form 中，然后向那个 iframe 提交。当然这里 iframe 通过样式设置为不可见的了。

调试的过程中出现了很多低级错误，但因为 ajax 方式很难调试，花费了不少的时间才搞定，中间连 Visual Studio 2005 都用上了，用于调试 JavaScript. 下面把错误记录下来给自己以后提个醒：

1. fileElementId 注意不要在前面加上 '#', 否则会找不到控件（用 jQuery 时间久了很容易犯这个错误）。

2. <input type="file" /> 控件一定要加上 name 属性！因为这个没加表单将不会发送任何有效的文件数据。低级错误啊～

3. 其他需要在文件上传时同时发送的字段，可以考虑拼接成一个字符串，加到 url 里面用 get 的方式发送到服务器。当然，要记得字段内容用 encodeURIComponent 函数预先处理。

下面附上一点主要的客户端调用代码：

$.ajaxFileUpload
(
    {
        url:' / popup / note / image_upload /? ' + postData,
        secureuri: false ,
        fileElementId: fileElementId,
        dataType: 'json',
        success: function (data, status)
        {
             if ( typeof (data.error) != 'undefined'){
                 if (data.error != '')
                    alert(data.error);
                 else
                    alert(data.msg);
            }
        },
        error: function (data, status, e)
        {
            alert(e.description);
             for (k in data) alert(data[k]);
            alert(status);
        }
    }
)

有的时候文件的 name 是动态产生的，那么在服务器端, django 的 view 中，可以改用一种办法来获取上传文件的内容，而不需要知道控件的 name:

file_obj = request.FILES.values()[0]

而我们平常写的最多的是这样的：

file_obj = request.FILES.get( ' file1 ' , None)

尚待解决的问题：

AjaxFileUpload 插件提供了一个简单的 ajax 等待提示功能，大致是这样的：

$(divid + " .loading " ).ajaxStart(function(){
$(this).show();
}).ajaxComplete(function(){
$(this).hide();
});

其原理就是用一个“等待中...” 类似的 gif 动画图标，当开始请求的时候显示，请求完了隐藏掉。

但是我发现它触发 ajaxStart, ajaxComplete 事件的时候，都是用的一种全局的机制，这会导致一个奇怪的事情，就是假如页面上有多个类似的上传表单（但是其中等待提示图标的 id 不同）时，提示的图标好像会乱掉，不该显示的显示。因为对 jQuery 插件机制还不熟悉，这个问题有待研究解决。