通过ajax将上传的excel文件数据传递给python答案

【问题标题】：Pass uploaded excel file data to python via ajax通过ajax将上传的excel文件数据传递给python
【发布时间】：2020-03-05 08:07:04
【问题描述】：

我目前有一个选择文件选项，用户可以在其中上传 Excel 文件。以下是代码。

HTML

<div class="col-md-6">
    Upload excel
    <input type="file" id="file_upload" class="file_upload">
    <button type="button" id="upload_submit" class="btn btn-primary upload_submit">Upload</button>
</div>

$("body").on("click", ".upload_submit", function () {
    // debugger
    var filepath = $("#file_upload").val()
})

我正在尝试提取文件路径并将路径发送到 python，以便我可以在后端进行操作。但我得到的路径是 'C:\fakepath\dummy_data.xls'

经过一番谷歌搜索，我了解到最新的浏览器限制从客户端显示用户目录。

那么，请建议，我如何将这个 excel 数据发送到后端的 python 函数？

【问题讨论】：

你有整个文件，那么你想用路径做什么？
@NishantNawarkhede，我如何在 js 中获取文件并将其传递给 python？你能帮忙吗？

标签： javascript python jquery django ajax

【解决方案1】：

上传文件的最小示例，

views.py

def upload(request):
    if request.method == 'GET':
        f = FileUpload()

    elif request.method == 'POST':
        import ipdb;
        ipdb.set_trace()
        f = FileUpload(request.POST, request.FILES)
        if f.is_valid():
            uploaded_file = f.cleaned_data['file_object']
            # manipulate file here.

    return render(request, 'upload.html', {'form': f})

urls.py

urlpatterns = [
    path('', views.home, name='home'),
    path('upload/', views.upload, name='uoload'),

    path('admin/', admin.site.urls),
]

上传.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $( document ).ready(function() {
    alert( "ready!" );

    $("#upload-btn").click(function (event) {

        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "/upload/",
            data: data,
            processData: false,
            contentType: false,
            cache: false,
            timeout: 600000,
            success: function (data) {

                $("#result").text(data);
                console.log("SUCCESS : ", data);
                $("#btnSubmit").prop("disabled", false);

            },
            error: function (e) {

                $("#result").text(e.responseText);
                console.log("ERROR : ", e);
                $("#btnSubmit").prop("disabled", false);

            }
        });

    });
    });

    </script>

</head>
<body>

<form action="/upload/" method="post" id="file-upload-form" enctype="multipart/form-data"> {% csrf_token %}
    {{ form }}
    <button type="submit" class="btn btn-primary" id='upload-btn'>Upload</button>
</form>

</body>
</html>

【讨论】：

感谢 Nishant！...会尽力让您知道