进度条未进入拖放区答案

【问题标题】：Progress bar not coming in dropzone进度条未进入拖放区
【发布时间】：2014-01-27 20:31:33
【问题描述】：

我已经使用 dropzone 进行多个文件上传，这里我遇到了一个奇怪的问题，我在下面给出我的代码。

<script type="text/javascript" src="<?php echo $this->webroot?>js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="<?php echo $this->webroot?>css/popup_style.css" type="text/css"/>
<link rel="stylesheet" href="<?php echo $this->webroot;?>css/dropzone.css" />

<script src="<?php echo $this->webroot;?>js/dropzone.min.js"></script>
<script type="text/javascript">
            jQuery(function($){

            try {
              jQuery(".dropzone").dropzone({
                paramName: "file", // The name that will be used to transfer the file
                maxFilesize: 10, // MB
                maxFiles: 6,
                //autoProcessQueue: true,
                addRemoveLinks : true,
                acceptedFiles: ".jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF",
                dictDefaultMessage :
                '<span class="bigger-150 bolder"><i class="icon-caret-right red"></i> Drop files</span> to upload \
                <span class="smaller-80 grey">(or click)</span> <br /> \
                <i class="upload-icon icon-cloud-upload blue icon-3x"></i>',
                dictResponseError: 'Error while uploading file!',

                //change the previewTemplate to use Bootstrap progress bars
                previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-success progress-striped active\"><span class=\"bar\" data-dz-uploadprogress></span></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>"
              });
            } catch(e) {
              alert('Dropzone.js does not support older browsers!');
            }

            });
        </script>
<body style="margin:0px;">
<div class="popup">
    <div class="popHead">
        <!--<a href="#" class="popCross"></a>-->
        <div class="clear"></div>
    </div>
    <div class="popBody">
        <div id="dropzone">
            <form action="<?php echo $this->webroot;?>manage/multiple_latest_experience_upload" class="dropzone">
                <div class="fallback">
                    <input name="photo" id="photo" type="file" multiple="" />
                </div>
            </form>
        </div>

    </div>
</div>
</body>

现在的问题是，如果我使用，

<script type="text/javascript" src="<?php echo $this->webroot?>js/jquery-1.7.2.min.js"></script>

然后属性 "maxFiles" ， "acceptedFiles" 工作正常，但进度条没有出现。

如果我删除，

<script type="text/javascript" src="<?php echo $this->webroot?>js/jquery-1.7.2.min.js"></script>

JS 库然后属性 "maxFiles" ， "acceptedFiles" 不起作用但进度条来了。当这个页面被加载到一个fancybox中时，会显示一个JavaScript错误“错误：已附加Dropzone。”。我不明白如何解决这个问题。

【问题讨论】：

标签： jquery dropzone.js

【解决方案1】：

试试下面的代码：

var myDropzone = new Dropzone("your selector",{
    // you options.
});

【讨论】：

这是一个非常简短的答案，也许你可以详细说明
来自审核队列：我可以请求您在您的答案周围添加更多上下文。仅代码的答案很难理解。如果您可以在帖子中添加更多信息，这将对提问者和未来的读者都有帮助。

【解决方案2】：

我怀疑您使用的jquery 版本太旧。试试 1.10.2

【讨论】：