Question

当前，我正在尝试构建一个功能，用户可以更改其个人资料，包括电子邮件，姓名和照片。但是，我已成功更改了电子邮件和姓名，但未更改照片。我最初的想法是，首先获得照片路径，然后将路径传递到view.py。

我的html代码如下：

<input type="file" id="ava_up" name="ava_up" accept="image/png, image/jpeg, image/gif, image/jpg" />

我的Ajax代码是：

$(document).on('submit', '#profile_edit', function (e) {
            e.preventDefault();

            var usr_nickname = $('#e_nickname').val();
            var pattern = "%";
            var res = usr_nickname.match(pattern)

            if(res){
                $('#error_info').html("<b>Your nickname should not contain %.</b>")
                return;
            }

            var usr_email = $('#e_email').val();
            var usr_photo = $('#ava_up').val();

            $.ajax({
                type:'POST',
                url:'./',
                data:{
                    async: false,
                    avatar:usr_photo,
                    nickname:usr_nickname,
                    email:usr_email,
                    csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
                },
                success:function (response) {
                    var t = $.parseJSON(response)
                    if (t.code == 1){
                        $('#error_info').html("<b></b>")
                        $('#done').modal('show')
                    }
                    else if (t.code == -2){
                        $('#error_info').html(t.message)
                    }
                    else {
                        $('#error_info_2').html(t.message)
                    }
                    //window.location.reload()
                },
            })
        })

我的View.py是：

def edit_usr_profile(request):

result = collections.OrderedDict()
result['code'] = ""
result['message'] = ""

user = request.user
objs = UserProfile.objects.filter(usr=user)
usr_objs = UserProfile.objects.get(usr=user)
if request.method == 'POST':
    if request.is_ajax():
        try:
            usr_objs.avatar = request.FILES.get('avatar')
            usr_objs.nickname = request.POST.get('nickname')
            usr_objs.email = request.POST.get('email')
            usr_objs.save()
            result['code'] = "1"
            result['message'] = ""
        except Exception as e:
            if str(e) == "'avatar'":
                result['code'] = "-1"
                result['message'] = "Failed to upload photo."
            else:
                result['code'] = "-2"
                result['message'] = "The nickname you entered exists. Please try another one."
        return JsonResponse(json.dumps(result), safe=False)

return render(request, 'account/edit_profile.html', {'objs':objs, 'resultInfo':result})

我只是试图提醒照片路径，但它返回了"C:\fakepath\photo.jpg"。然后我在Google上搜索，人们说这是因为浏览器安全。因此，我想知道是否有人对如何上传（或将图像的完整路径传递到View.py）照片有建议？

如果您能帮助我，我将不胜感激！

Answer 1

假设您的表格格式为<form id="myForm">，而您的js应该遵循

$(document).on('submit', '#myForm', function (e) {
        e.preventDefault();
        // validations
        let formData = new FormData($("#myForm")[0]);
        $.ajax({
           url: url,
           type: 'post',
           contentType: false,
           processData: false,
           data: formData
        })  
        .done(function(){
           // success 
        })
        .fail(function(){
           // fail
       }) 
});

在视图句柄中，就像正常流程一样。

form = MyModelForm(request.POST, request.FILES)
form.save()

Answer 2

您没有使用.val()发送实际图像，仅发送文件名。要通过ajax发送图像，您将需要使用FormData发送表单：

edit_profile.html：

<form id="profile_edit">
    {% csrf_token %}
    <input type="text" id="e_nickname" name="email"/>
    <input type="text" id="e_email" name="nickname"/>
    <input type="file" id="ava_up" name="avatar" accept="image/png, image/jpeg, image/gif, image/jpg"/>
    <button type="submit">submit</button>
</form>
<script
        src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>
<script>
    $(document).on('submit', '#profile_edit', function (e) {
        e.preventDefault();

        var usr_nickname = $('#e_nickname').val();
        var pattern = "%";
        var res = usr_nickname.match(pattern)

        if (res) {
            $('#error_info').html("<b>Your nickname should not contain %.</b>")
            return;
        }

        $.ajax({
            type: 'POST',
            url: './',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function (response) {
                var t = $.parseJSON(response)
                if (t.code == 1) {
                    $('#error_info').html("<b></b>")
                    $('#done').modal('show')
                } else if (t.code == -2) {
                    $('#error_info').html(t.message)
                } else {
                    $('#error_info_2').html(t.message)
                }
                //window.location.reload()
            },
        })
    })
</script>

Answer 3

  <TableDepositCheckReceiveCheck 
    dataSource={PropsMapReceiveCheckList} 
    columns={columnsDepositCheckTwo}
    setIsModalVisible={setIsModalVisible}
/>

如何通过ajax在Django中上传照片？

3 个答案: