jquery 已创建Dropzone,但不显示拖放框

6yjfywim  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(125)

也许这是一个非常简单的任务,但在我的项目中有意外的行为!
我正在创建一个表单,并希望在我的Laravel 10项目的刀片文件中使用Dropzone
我添加了CSS和JS文件到我的页面。

@section('style')
    @parent

{{--    <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />--}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.css" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/basic.css" type="text/css" />

@endsection

JS:

@section('scripts')
    @parent

{{--    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>--}}
{{--    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>--}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>

评论链接是因为我也用它们做了测试。
当我检查我的表单时,有dropzone函数附加到我的表单:

这是我创建dropzone的js:

<script type="text/javascript">
        Dropzone.options.solo = { //solo is form id 
            maxFiles: 50,
            acceptedFiles: ".jpeg,.jpg,.png",
            addRemoveLinks: true,
            timeout: 500,
            success: function (file, response) {
                console.log(file, response);
            },
            error: function (file, response) {
                return false;
            },

        };

        // $(()=> {
        //     $('#solo').dropzone({
        //         url: '/some/address'
        //     })
        // })
    </script>

这是我的输出:

你知道我有什么问题吗?
先谢了。

dvtswwa3

dvtswwa31#

用提供的代码复制这个问题真的很困难,但我想重要的是你只包含一次库,首先包含jQuery。
下面是一个工作示例:

Dropzone.options.solo = { //solo is form id 
  maxFiles: 50,
  acceptedFiles: ".jpeg,.jpg,.png",
  addRemoveLinks: true,
  timeout: 500,
  success: function(file, response) {
    console.log(file, response);
  },
  error: function(file, response) {
    return false;
  }
};
form {
  border: solid thin black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />

<form id="solo" action="/target" class="dropzone">
  <input type="text" name="title">
</form>

相关问题