当请求来自Ajax和表单时,无法处理Django中的文件上载

时间:2015-07-17 04:01:34

标签: jquery python ajax django

我正在尝试从Ajax帖子处理Django中的文件上传,它不起作用:(

以下是执行上传的html文件中的代码:

<form action="{% url 'saveprof' %}" method="post" enctype="multipart/form-data" id="form1">
        {% csrf_token %}
        <div class="profpic" style="background:url(../../../static/app/img/profile.png)">
            <input type="file" id="picpath" name="picpath" class="uploadpic" value=""/>
        </div>
        </form>            
        {% csrf_token %}

保存

以下Ajax方法用于发布数据:

function saveprof() {
var formData = {
                'picpath_Aj': $('#picpath').val()
            };
        $.ajax({
            type: "POST",
            url: "saveprof",
            enctype: 'multipart/form-data',
            async: true,
            data: {
                 formData,
                'profemail_Aj': $('#profemail').val(),
                'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()
            },
            success: function (data, textStatus, jqXHR) {
                $('#message').html(data);
            }
        });
    }

这可能吗?

如何使用html表单进行文件上传并通过上述ajax方法发送此数据?

这是视图

def saveprof(request):
    if request.method == "POST":
        user_form1 = DocumentForm(request.POST, request.FILES)
        if user_form1.is_valid():
            user_form1.save()
    #And code to save some other fields as well along with the user_form1

Form.py

class DocumentForm(forms.ModelForm):
    picpath = forms.FileField()
    class Meta:
        model = td_Student
        fields = ('picpath',)

Model.py

class td_Student(models.Model):
    picpath=models.FileField(upload_to=unique_filename)

def unique_filename(instance, filename):
    ext = filename.split('.')[-1]
    filename = "%s_%s.%s" %(uuid.uuid4(),time.strftime("%Y%m%d_%H%M%S"), ext)
    return os.path.join('documents/documents/'+time.strftime("%Y%m%d"), filename

运行此代码时,user_form1.save()永远不会被执行,因为视图中的有效性条件失败。

我试了几个小时来弄清楚这个问题,但是无法得到。 你能否帮我确定一下这个实现的错误?

图片未保存在服务器中:( ..而我无法按预期获得文件名(例如:'documents / documents / 20150716 / a1f81a80-ce6f-446b-9b49-716b5c67a46e_20150716_222614.jpg',按照unique_filename方法)

请注意,当我使用HTML表单而不是使用Ajax post时,我可以成功上传图像..但我对当前实现的要求仅限于Ajax。

1 个答案:

答案 0 :(得分:2)

我们说你有这样的表格:

<form method="POST" name="form" id="form" enctype="multipart/form-data">
    <input type="file" id="img"/>
    <input type="submit"/>
</form>

你必须得到用户选择的img,这样你的javascript必须如下所示:

$(document).ready(function(){
    $('form').on('submit', function(e){
        e.preventDefault();
        var data = new FormData($('form').get(0));
        $.ajax({
            url: :"/URL",
            method: "POST",
            data: data,
            success: function(data){},
            error: function(data){},
            processData: false,
            contentType: false,
        });
    });
});

现在您将能够在django中检索用户选择的img:

request.FILES