Question

我已经使用dropzone成功发送了一个csrf令牌但是使用了jquery样式，现在我不想在我的代码中使用任何jquery我想使用javascript样式来获取csrf令牌。我尝试使用下面的代码，但它继续给我tokenmismatch错误，

myDropzone.on("sending", function(file,xhr,formData) {
            // Show the total progress bar when upload starts
            var folname = document.getElementById('folname').value;
            var token = document.getElementsByName("_token")[0].value;

            formData.append('folname',folname);

            formData.append('_token', token );
        });

这是使用jquery工作的代码。

myDropzone.on("sending", function(file,xhr,formData) {
            // Show the total progress bar when upload starts
            var folname = document.getElementById('folname').value;
            formData.append('folname',folname);
            formData.append('_token', $('input[name="_token"]').val() );

        });

任何建议表示赞赏。谢谢你们。

Answer 1

普通的旧内联javascript变量也许？在所有脚本可能在头部之前放置

var csrf_token = "{{ csrf_token() }}";
...

// js file where dz related code is residing
...
myDropzone.on("sending", function(file,xhr,formData) {
    // Show the total progress bar when upload 
    var folname = document.getElementById('folname').value;
    formData.append('folname',folname);
    formData.append('_token', csrf_token);
});

Answer 2

伙计们，感谢您带领我走上正确的道路。我找到了问题，我有两个元素＆＃34; _token＆＃34;名称。所以在调试时它会返回“未定义的”＃39;错误。

此代码现在有效。

var token = document.getElementsByName("_token")[0].value;

我的csrf令牌声明就像这样

<form name="post_form" id="post_form" class="form-horizontal" role="form" method="POST" action="/post">
{!! csrf_field() !!}
<!-- other code input boxes -->
</form>
<!--my dropzone code is below the form-->
<script>
// dropzone code here
</script>

解决方案是我将meta标签中的令牌用于我的dropzone提交，或者从＆＃34; _token＆＃34;更改元标记名称的名称。别的东西。所以为此，我选择将meta标签用于我的dropzone代码，它现在正在运行。请参阅下面的解决方案。

我在标题中添加了一个元标记＆＃34; _token＆＃34;名。

<html>
    <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="_token" content="{!! csrf_token() !!}"/>

    </head>

并在我的页脚

<script type="text/javascript">
        $.ajaxSetup({
           headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
        });
    </script>

</body>
</html>

我使用了元标记令牌代替。这就是我的所作所为。

myDropzone.on("sending", function(file,xhr,formData) {
            // Show the total progress bar when upload starts
            var folname = document.getElementById('folname').value;                
            var token1 = document.getElementsByTagName('meta')['_token_'].getAttribute('content');                
            formData.append('folname',folname);    
            formData.append('_token', token1 );
        });

让我知道是否应该添加其他内容以使帖子更有用。

Answer 3

有两种方法可以解决它。

--- 第一次（最简单）---

<form method="POST" action="/your/url/here" class="dropzone" id="upload-files" enctype="multipart/form-data">
    {{ csrf_field() }}
    {{ method_field('POST') }}
</form>

<script>
    $(function() {
        Dropzone.options.uploadFiles = {
            paramName: 'document_files',
            maxFilesize: 3,
            init : function() {
                this.on("success", function(file, response) {
                    // file uploaded successfully
                });
            }
        };
    });
</script>

--- 第二次 ---

以这种方式使用dropzone，您可以将dropzone放在另一个表单中。

<div class="dropzone dropzone-previews" id="dropzone-upload-documents"></div>

<script>
    $(function() {
        // in this case is important that autoDiscover  = false
        Dropzone.autoDiscover = false;

        $("#dropzone-upload-documents").dropzone({
            paramName: 'document_files',
            maxFilesize: 3,
            url: "/your/url/here",
            init: function() {
                this.on("success", function(file, response) {
                    // file uploaded successfully
                });
            },
            sending: function(file, xhr, formData) {
                formData.append("_token", "{{ csrf_token() }}");
                formData.append("_method", "POST");
            }
        });
    });
</script>

如何将csrf令牌添加到dropzonejs中 - javascript样式 - laravel 5.1

3 个答案: