文件上傳

時間 2019-11-30

標籤文件上傳简体版

原文原文鏈接

form表單實現文件上傳

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bs/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <form action="" style="margin-top:100px" class="form-group" method="post" enctype="multipart/form-data">
                {% csrf_token  %}
                <div class="form-group">
                    <label>用戶名：</label>
                    <input type="text" name="user" class="form-control">
                </div>
                <div>
                    <label>上傳文件</label>
                    <input type="file" name="file_obj">
                </div>
                <input type="submit" class="btn btn-info" value="提交">
            </form>
        </div>
    </div>
</div>

</body>
<script src="/static/jquery/jquery-3.3.1.js"></script>
</html>

django部分javascript

def upload(request):
    if request.POST:
        file_obj = request.FILES.get("file_obj")
        print(file_obj)
        path = os.path.join(settings.MEDIA_ROOT, file_obj.name)
        
        with open(path, 'wb')as f:
            for line in file_obj:
                f.write(line)
    return render(request, "upload.html")

ajax實現文件上傳

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>註冊</title>
    <link rel="stylesheet" href="/static/bs/css/bootstrap.css">

    <style type="text/css">
        .error {
            color: #ff2b23;
        }
    </style>
</head>

<body>
<div class="container" style="margin-top: 100px">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <form id="form">
                {% csrf_token %}
                <div class="form-group">
                    <label>用戶名：</label>
                    <input type="text" class="form-control" id="user" name="user">
                    <span class="error pull-right"></span>
                </div>
                <div class="form-group">
                    <label>密碼：</label>
                    <input type="password" class="form-control" id="pwd" name="pwd">
                    <span class="error pull-right"></span>
                </div>
                <div class="form-group">
                    <label>確認密碼：</label>
                    <input type="password" class="form-control" id="re_pwd" name="re_pwd">
                    <span class="error pull-right"></span>
                </div>
                <div class="form-group">
                    <label for="avatar">頭像
                        <img id="avatar_img" src="/media/avatar/default.jpeg" height="60" width="60">
                    </label>
                    <input type="file" id="avatar" name="avatar" style="display: none;">
                </div>
                <input type="button" class="sub btn btn-info" value="註冊">
            </form>
        </div>
    </div>
</div>
</body>
<script src="/static/jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $("#avatar").change(function () {
        var file_obj = $(this)[0].files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file_obj);
        console.log(reader.result);
        reader.onload = function () {
            $("#avatar_img").attr("src", reader.result);
        }

    });
    $(".sub").click(function () {
        var pwd = $("#pwd").val();
        var re_pwd = $("#re_pwd").val();

        if (pwd != re_pwd) {
            $("#re_pwd+ span").html("兩次密碼不一致");
            setTimeout(function () {
                $("#re_pwd").next().html('');
            }, 1000);
            return
        }


        var formdata = new FormData();
        var requestData = $("#form").serializeArray();
        $.each(requestData, function (index, data) {
            formdata.append(data.name, data.value)
        });
        console.log(formdata);
        $.ajax({
            url: "",
            type: "post",
            contentType: false,
            processData: false,
            data: formdata,
            success: function (data) {
                console.log(data);
                if (data.user) {
                    alert("註冊成功！");
                    location.href = "/login/";
                } else {
                    $("span.error").html('');
                    $.each(data.msg, function (field, error_list) {
                        console.log(field);
                        console.log(error_list);
                        $("#" + field).next().html(error_list);
                    })
                }
            }

        })


    })
</script>
</html>

django部分

views.pycss

def reg(request):
    print(request.POST)
    if request.is_ajax():
        form = UserForm(request.POST)
        response = {"user": None, "msg": None}
        if form.is_valid():
            user = form.cleaned_data.get('user')
            pwd = form.cleaned_data.get('pwd')
            avartar_obj = request.FILES.get('avatar')
            extra = {}
            if avartar_obj:
                extra["avatar"] = avartar_obj
            models.UserInfo.objects.create_user(username=user, password=pwd, **extra)
            response["user"] = user
            
        else:
            print(form.errors)
            response["msg"] = form.errors
        return JsonResponse(response)
    return render(request, 'reg.html')
    
def login(request):
    if request.is_ajax():
        response = {"user": None, "msg": None}
        print(request.POST)
        username = request.POST.get("user")
        pwd = request.POST.get("pwd")
        user = auth.authenticate(username=username, password=pwd)
        
        if user:
            auth.login(request, user)
            response["user"] = user.username
        else:
            response["msg"] = "用戶名或者密碼不正確"
        return JsonResponse(response)
    
    return render(request, "login.html")

modelshtml

class UserInfo(AbstractUser):
    avatar = models.FileField("avatar/", default='avatar/default.jpeg')

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。