1

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

到目前为止，服务器端似乎使用 CURL 进行了正确的测试：

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

编辑：这就是我对 curl 所做的 ->

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 的工作示例......

如果您有任何可用的简单示例，谢谢分享

4

2 回答 2

0

如果您的意思是使用$.ajax()，$.post()那么它将无法正常工作，因为 Ajax 不支持文件上传。参见例如这个 SO 帖子。

虽然有一些解决方法 - 例如通过隐藏 iframe 或基于 Flash 的解决方案中的表单上传 - 它们在上面提到的 SO 帖子中进行了讨论。但是，它们都不是完美的，因此您必须选择最适合您的用例的一种。

于 2013-03-17T02:15:21.823 回答
0

万一将来有人偶然发现这一点，我在 github 上curl使用这个 jquery File Upload Demo 让图像上传工作（已经在使用）。

使用基本文件上传：

  1. 包括必要的 js 文件（jquery、jquery-fileupload、iframe-transport 和 jquery.ui.widget）。
  2. 初始化目标input[type=file]控件如下图

代码：

$('#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');

这应该可以解决问题。

于 2015-10-13T20:23:24.220 回答