带有JQuery的Django Tasypie图像上传示例

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

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

我觉得这篇文章很有帮助

编辑：这就是我对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用于文件上传的工作示例

---

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

如果您的意思是使用

$.ajax（）

或

$.post（）

，那么它将不起作用，因为ajax不支持文件上传。见例

---

不过也有一些解决办法——例如，通过隐藏iframe或基于flash的解决方案中的表单上传——在上面提到的SO帖子中进行了讨论。但是没有一个是完美的，所以你必须选择一个最适合你的用例。

如果将来有人偶然发现这一点，我在我的用例中使用了图像上传功能（已经使用

curl

了）

使用基本文件上载：

包括必要的js文件（jquery、jquery文件上传、， iframe传输和jquery.ui.widget）

初始化目标

输入[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');

$（'#fileupload'）。fileupload({
url:url，
数据类型：“json”，
完成：功能（e，数据）{
$.each（data.result.files，函数（索引，文件）{
$（'
'）.text（file.name）.appendTo（'#files'）；
});
},
progressall：功能（e、数据）{
var progress=parseInt（data.loaded/data.total*100,10）；
$（'#progress.progress bar'）.css(
“宽度”，
进度+“%”
);
}
}).prop（'disabled'，！$.support.fileInput）
.parent（）.addClass（$.support.fileInput？未定义：“已禁用”）；

---

这应该可以解决问题。

向我们展示您的卷发效果，您对此感到满意，我们可以向您展示如何在jquery中实现这一点刚才添加了与卷发效果相关的示例谢谢我将测试该方法！