使用JQuery的Django-Tasypie图像上传示例

时间:2013-03-07 05:43:29

标签: jquery django file-upload tastypie

我正在寻找一种方法来实现从jquery到Django-Tastypie的客户端文件(图像)上传。

到目前为止,服务器端似乎正确使用CURL进行测试:

我发现这篇文章有用Django-tastypie: Any example on file upload in POST?

编辑:这就是我用卷曲做的 - >

in api.py :
    class MultipartResource(object):
        def deserialize(self, request, data, format=None):
            if not format:
                format = request.META.get('CONTENT_TYPE', 'application/json')
            if format == 'application/x-www-form-urlencoded':
                return request.POST
            if format.startswith('multipart'):
                data = request.POST.copy()
                data.update(request.FILES)
                return data
            return super(MultipartResource, self).deserialize(request, data, format)


    class FooResource(MultipartResource, ModelResource):
        img = fields.FileField(attribute="img", null=True, blank=True)
        class Meta:
            queryset = Foo.objects.all()
            authorization= Authorization()


in models.py :
class Foo(models.Model):
    img = models.ImageField(upload_to="images", null=True, blank=True)
    body = models.CharField(max_length=255)

然后使用curl运行以下命令:

curl -v  -F "body=test" -F "img=@my_picture.png" http://localhost:8000/api/v1/foo/

现在我正在尝试使用jquery作为客户端而不是curl .....同样没有运气。 很难找到Jquery + Tastypie的文件上传工作示例......

如果你有任何简单的例子可以感谢分享

2 个答案:

答案 0 :(得分:0)

如果您的意思是使用$.ajax()$.post(),那么它将无效,因为Ajax不支持文件上传。参见例如this SO post

虽然有一些解决方法 - 例如通过表单在隐藏的iframe或基于闪存的解决方案中上传 - 它们在上面提到的SO帖子中讨论。虽然它们都不完美,但您必须选择最适合您用例的那个。

答案 1 :(得分:0)

如果将来有人偶然发现这种情况,我会使用this jquery File Upload Demo on github在我的案例中进行图片上传工作(已使用curl工作)。

使用基本文件上传:

  1. 包含必要的js文件(jquery,jquery-fileupload, iframe-transport和jquery.ui.widget)。
  2. 初始化目标input[type=file]控件,如下所示
  3. <强>代码:

    $('#fileupload').fileupload({
            url: url,
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo('#files');
                });
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }
        }).prop('disabled', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : 'disabled');
    

    这应该可以解决问题。