使用 JQuery 和 Django 上传图片答案

【问题标题】：Uploading Image Using JQuery And Django使用 JQuery 和 Django 上传图片
【发布时间】：2011-11-07 07:08:45
【问题描述】：

在您继续阅读之前，请相信我，我已经阅读了有关此主题的所有其他帖子，但没有一篇有帮助。

我正在尝试向我的网站添加图片上传功能。我要上传图片通过 ajax 帖子。我无法正常工作。

这是我所拥有的：

HTML - 我有一个特殊的设置，以便显示图像而不是愚蠢的按钮和文本字段。我还使用 onChange 事件在选择图像后点击“确定”时自动提交。

<form id="add-picture-form" method="POST" action="/api/upload_image/" enctype="multipart/form-data">{% csrf_token %}  
    <div class="thumbnails" style="width:400px;">
        <label class="cabinet BrandHeader"> 
            <input type="file" class="file" id="upload-photo" onChange="$('#add-picture-form').submit();" /> 
        </label> 
    </div>
</form>

jquery：

$('#add-picture-form').submit(function() { 
    //var filename = $("#upload-photo").val();
    var photo = document.getElementById("upload-photo"); 
    var file  = photo.files[0];

$.ajax({ 
    type: "POST",
    url: "/api/upload_image/",
    enctype: 'multipart/form-data',
    data: {'file': file.getAsBinary(), 'fname' : file.fileName },
    success: function(){
       alert( "Data Uploaded: ");
    }
});

    return false;   
});

当您发布到 /api/upload_image/ 时，我的 django 视图终于被击中了

def ajax_upload( request ):

    print request.POST
    print request.FILES

    return http.HttpResponse(simplejson.dumps([True]), mimetype='application/javascript')

我尝试将图像写入二进制文件，但无法打开已写入的数据。为什么使用 javascript 上传图片如此困难？我是个白痴，只是不使用简单的解决方案？如果是这样，请告诉我在 Django 中使用 jQuery 上传图片的最佳方式是什么。

【问题讨论】：

你卡在哪里了？您的 HTML/JS 工作正常还是有问题？
你能以这种方式将任何文件发布到服务器吗？我不认为文件可以 ajax-ed 到服务器。

标签： ajax django jquery

【解决方案1】：

试试 jQuery 插件 Uploadify 或 SWFUpload。甚至有人为您完成了 Django 集成，请参阅：https://github.com/tstone/django-uploadify 和 http://blog.fogtunes.com/2009/11/howto-integrate-swfupload-with-django/。

【讨论】：

【解决方案2】：

我对 django 不太熟悉，但我认为问题在于通过 AJAX 上传文件并不像您想象的那么简单。

有几种方法可以解决这个问题，但我建议使用一种已经存在的方法。由于您使用的是 jquery，我会推荐 jquery 表单插件：http://jquery.malsup.com/form/#getting-started

该插件支持开箱即用的文件上传，您真正需要做的就是将其连接到您的表单：

$('#add-picture-form').ajaxForm();

另见：How can I upload files asynchronously?

【讨论】：