Javascript 上载多个文件并显示进度条

我正在Django的一个项目中工作，我创建了一个页面来添加关于文件的数据信息，然后添加文件本身

单击“更多数据集”按钮时，会添加另一个字段以上载另一个文件

可以一次性附加最终用户想要的任意多个文件。 我需要的是上传所有附件一旦“上传数据集”点击和个人进度栏应显示。 到目前为止，我已经完成了多个教程，但使用起来有点接近。 JS代码：

该函数现在工作正常。它完全可以发送数据，但是在DevelopmentServer控制台屏幕上我发现了这个错误

Forbidden (CSRF token missing or incorrect.): /accounts/add_data_set/
[22/Feb/2020 15:36:06] "POST /accounts/add_data_set/ HTTP/1.1" 403 2513

我甚至检查了发送到服务器的POST数据，它确实包含csrf令牌

<QueryDict: {'csrfmiddlewaretoken': ['WREoIV0aY4B2XyrU7d9Qw8kMwiokXqwWsmbc2QSHX5VQ0EaYjjeuv7PeysMJjecp'], 'user_name': ['rakesh'], 'dataset': ['r'], 'creation_date': ['2020-02-22'], 'beamline': ['r']}>

---

我有点困惑。这是一个问题吗？

如果你有任何文件上传器插件，他们的文档将拥有一切，或者如果你想要正常的文件上传输入，你可以将文件输入绑定到表单数据，然后发布操作，操作表单数据和保存图像，然后你可以返回保存图像和显示，这样就可以实现简单的ajax上传

var form_data = new FormData();                  
        var totalFiles = document.getElementById('file').files.length;
        var count = 0;
        for (var i = 0; i < totalFiles; i++) {
            var file = document.getElementById('file').files[i];
            count++;
            form_data.append("file", file);
        }


$.ajax({
            url: "/uploadingaction",
            dataType: 'json',           
            contentType: false,
            processData: false,
            data: form_data,                             
            type: 'POST',
            success: function (files, response, xhr, pd) {
                $('yourloaderid').hide();                
                if (files.status != false) {                   
                    $('#displayid').val('/location/' + files.filename);

                    var filedata = files.filename;                                        

                } else {
                    alert(files.filename);
                }

            }
        })

---

您是否在某处添加了脚本jquery.ui.widget.js和jquery.fileupload.js？请注意，这是在您使用“浏览”按钮选择文件时立即上载文件，而不是在按下“提交表单”按钮时为不同的输入字段提交不同的文件。如下面的答案所示，单击“上载数据集”按钮时，我只会提交整个表单及其文件。您不需要教程中的任何脚本，只需要jquery。@dirkgroten是的，我已经在模板中添加了jquery.ui.widget.js和jquery.fileupload.js脚本。在你的第二条评论中，你的意思是为了推送数据和进度条可视化，我不需要这些脚本吗？所有这些都将由jQuery处理吗？是的，您不需要这些脚本，现在一切都在jQuery代码中处理。听起来，您的表单仍然由浏览器正常提交，而不是触发javascript。您可以通过查看浏览器开发工具的“网络”选项卡来验证：如果您看到POST请求的文档请求，则表示您的浏览器已提交表单。如果$.ajax提交表单，您将看到一个XHR请求。将事件处理更改为$form.onsubmit，函数{…}，而不是按钮上的click事件，或者删除按钮上的type=submit。@DirkRoten我尝试了删除type=submit的技术。它工作正常，但页面停止刷新。我使用了我在第二次编辑中包含的技术，我面临一个问题。请注意，此代码应包装在$add_new_dataset.onclick函数{…}中，并且还应包含$this.preventDefault以防止按钮提交表单。添加xhr选项以添加进度行为，如图所示@dirkgroten感谢您的帮助。根据我的理解，我对JS函数进行了一些编辑，但它仍然不起作用。@nikesh感谢您的快速响应。在命令`$'yourloaderid.hide；`“yourloaderid”应该表示文件选择器的id吗？为什么会被隐藏？@mayankmagain实际上这是正常的加载屏幕或进度条，你可以说在ajax成功加载后可以隐藏哪个。

Forbidden (CSRF token missing or incorrect.): /accounts/add_data_set/
[22/Feb/2020 15:36:06] "POST /accounts/add_data_set/ HTTP/1.1" 403 2513

<QueryDict: {'csrfmiddlewaretoken': ['WREoIV0aY4B2XyrU7d9Qw8kMwiokXqwWsmbc2QSHX5VQ0EaYjjeuv7PeysMJjecp'], 'user_name': ['rakesh'], 'dataset': ['r'], 'creation_date': ['2020-02-22'], 'beamline': ['r']}>

var form_data = new FormData();                  
        var totalFiles = document.getElementById('file').files.length;
        var count = 0;
        for (var i = 0; i < totalFiles; i++) {
            var file = document.getElementById('file').files[i];
            count++;
            form_data.append("file", file);
        }


$.ajax({
            url: "/uploadingaction",
            dataType: 'json',           
            contentType: false,
            processData: false,
            data: form_data,                             
            type: 'POST',
            success: function (files, response, xhr, pd) {
                $('yourloaderid').hide();                
                if (files.status != false) {                   
                    $('#displayid').val('/location/' + files.filename);

                    var filedata = files.filename;                                        

                } else {
                    alert(files.filename);
                }

            }
        })