通过ajax将上传的excel文件数据传递给python - javascript

我目前有一个选择文件选项,用户可以在其中上传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>

JS

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

我试图提取文件路径并将路径发送到python,以便我可以在后端进行操作。但我将路径获取为'C:\ fakepath \ dummy_data.xls'

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

因此,请提出建议,我该如何将此excel数据发送到后端的python函数?

参考方案

最小上传文件的例子,

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),
]

upload.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>

使用php重新加载内容 - javascript

在对网站进行编程时,我以前使用过此代码,它可以完美工作,但是现在当我想使用一些Flash部件时,每次单击链接时,它都会重新加载所有网站。源代码: <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…

用jQuery填充模式形式 - javascript

我正在将订单表从数据库绘制到datatables(jquery插件)中。我要在每笔最后一笔交易或每笔交易中增加付款。问题是,如何获取单击添加付款按钮以添加付款的行的订单ID。其次,当点击addpayment时,它会弹出一个带有字段或订单号的模态表单。我想用在td中找到的订单ID填充该字段,并使其不可编辑或隐藏,但在提交模态表单时将其发布到服务器。表格和模式表…

尽管刷新,jQuery格式仍未应用于Ajax数据 - javascript

我正在通过GET响应消息从服务器(php文件)的可折叠内部加载列表视图。但是,尽管刷新了jQuery元素,但jQuery格式并未应用于添加的HTML。我的页面在这里:http://i.cs.hku.hk/~hsbashir/Project_Work/events/events.htmlHTML代码(仅相关代码)<script> lastRecor…

JavaScript处理期间数组内部的数组 - javascript

我正在尝试使用Ajax处理表单,并且在处理复选框时遇到了问题。我以为我可以在数组中做一个数组,将选中的框添加到数据对象中,但这似乎不起作用。它不会显示为控制台中对象的一部分或类似内容。我尝试了一些变化,但没有任何效果。这是当前的样子:var formData = { 'fname' : $('input[name=fname]&…

将简单的javascript代码转换为c# - javascript

昨天我在这里问了一个问题。使用javascript和html解决方案很简单前一阵子我打算什么是操纵html来执行javascript中的任务但是我改变了主意,将javascript代码重写为c#这是输入<Abstract> <Heading>Abstract</Heading> <Para TextBreak=�…