Dropzone 在本地主机上正常工作，在远程服务器上引发错误
Posted
技术标签:
【中文标题】Dropzone 在本地主机上正常工作，在远程服务器上引发错误【英文标题】：Dropzone working properly on localhost, throws error on remote server 【发布时间】：2015-11-13 06:39:06 【问题描述】：我已经配置了 dropzone 并在我的 localhost（这是一台 Windows 机器）上对其进行了测试。一切正常，Laravel 正在上传和处理文件。问题是我的网络服务器上没有发生同样的事情。两台机器上的代码相同。在 windows 上，div 中的 dropzone 可以正常显示（文字说明要拖放文件），但在 web 服务器上，文本不显示，我无法单击该区域。
Chrome 开发工具说：
Uncaught error: No URL provided
即使我配置了网址。我用谷歌搜索了这个错误，发现禁用自动发现应该可以解决它。我试过了，但它甚至在本地服务器上也不起作用。
这是我的 dropzone 选项文件：
Dropzone.options.editFilijalaDropzone = // The camelized version of the ID of the form element
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 10,
maxFiles: 10,
addRemoveLinks: false,
acceptedFiles: '.jpeg,.jpg,.png,.gif',
url: "/uploadNew/filijale/filijala/" + document.getElementById('filijala_hidden').value,
headers: 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') ,
// The setting up of the dropzone
init: function()
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
var element = document.getElementById('edit_filijala_submit');
var form = document.getElementById('edit_filijala_form');
element.addEventListener("click", function(e)
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
);
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function()
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
);
this.on("successmultiple", function(files, response)
// Gets triggered when the files have successfully been sent.
// Redirect user or notify of success.
form.submit();
);
this.on("errormultiple", function(files, response)
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
);
有问题的 html 是：
<h1>Ažuriranje filijale za firmu: $firma->naziv </h1>
<!-- if there are creation errors, they will show here -->
HTML::ul($errors->all())
!! Form::model($filijala, [
'method' => 'PUT',
'action' => array('FilijalaAdminController@update', $firma->id, $filijala->id),
'id' => 'edit_filijala_form'
]) !!
<div class="form-group">
!! Form::label('Naziv firme', 'Naziv firme') !!
!! Form::text('naziv_firme', $firma->naziv, array('class' => 'form-control', 'readonly')) !!
</div>
<div class="form-group">
!! Form::hidden('filijala_hidden', $filijala->id, array('class' => 'form-control', 'id' => 'filijala_hidden')) !!
</div>
<div class="form-group">
!! Form::label('Adresa filijale', 'Adresa filijale') !!
!! Form::text('adresa', Input::old('adresa'), array('class' => 'form-control')) !!
</div>
<div class="form-group">
!! Form::label('Telefon', 'Telefon') !!
!! Form::text('telefon', Input::old('telefon'), array('class' => 'form-control')) !!
</div>
<div class="form-group">
!! Form::label('Email', 'Email') !!
!! Form::text('email', Input::old('email'), array('class' => 'form-control')) !!
</div>
<div class="form-group">
!! Form::label('Uklanjanje slika', 'Uklanjanje slika') !!
<div class="row">
@foreach($slike as $slika)
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a <?php echo 'href="#imageOverlay' . $slika->id . '"'; ?> data-toggle="drop-panel" class="thumbnail">
<img <?php echo 'id="image' . $slika->id . '"'; ?> class="img-responsive" src=" $slika->url ">
</a>
<div <?php echo 'id="imageOverlay' . $slika->id . '"'; ?> class="cap-overlay show">
<div class="content">
<a href="javascript:obrisiSliku(' $slika->id ', 'filijale')" class="button small"><h5>Obriši sliku</h5></a>
</div>
</div>
</div>
@endforeach
</div>
</div>
<div class="form-group">
!! $slike->render() !!
</div>
<div class="form-group">
!! Form::label('Dodavanje slika', 'Dodavanje slika') !!
<div class="dropzone" id="edit_filijala_dropzone">
</div>
</div>
<div class="form-group">
!! Form::submit('Ažuriraj filijalu', array('id' => 'edit_filijala_submit')) !!
</div>
!! Form::close() !!
服务器是一台 CentOS linux 机器。
编辑：
生成的 HTML：
<html><head>
<title>Ažuriranje filijale</title>
<meta name="csrf-token" content="9dglsQuYuxZEcbko7sCwj8PMzQgbwFlpnfwlT5Gr">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/dropzone.css">
<link rel="stylesheet" href="/css/thumbnail-gallery.css">
<style>
.cap-overlay .button margin-top:10px
.cap-overlaywidth: 100%; color:#fff; background: rgba(0, 0, 0, 0.43);left:0;padding:12px; line-height: 1.4em;font-size:14px
.cap-overlay h5 color:#fff;
a[data-toggle="drop-panel"] display: block;
</style>
<style type="text/css"></style></head>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="http://5.189.145.111/admin_firme/2">Sve filijale za firmu</a></li>
<li><a href="http://5.189.145.111/admin_firme/2/filijale/create">Nova filijala</a>
</li></ul>
</nav>
<h1>Ažuriranje filijale za firmu: Kaymo PROPO LIST d.o.o </h1>
<!-- if there are creation errors, they will show here -->
<form method="POST" action="http://5.189.145.111/admin_firme/2/filijale/8" accept-charset="UTF-8" id="edit_filijala_form"><input name="_method" type="hidden" value="PUT"><input name="_token" type="hidden" value="9dglsQuYuxZEcbko7sCwj8PMzQgbwFlpnfwlT5Gr">
<div class="form-group">
<label for="Naziv firme">Naziv firme</label>
<input class="form-control" readonly="readonly" name="naziv_firme" type="text" value="Company X ">
</div>
<div class="form-group">
<input class="form-control" id="filijala_hidden" name="filijala_hidden" type="hidden" value="8">
</div>
<div class="form-group">
<label for="Adresa filijale">Adresa filijale</label>
<input class="form-control" name="adresa" type="text" value="dsasad ">
</div>
<div class="form-group">
<label for="Telefon">Telefon</label>
<input class="form-control" name="telefon" type="text" value="033 256 987 ">
</div>
<div class="form-group">
<label for="Email">Email</label>
<input class="form-control" name="email" type="text" value=" ">
</div>
<div class="form-group">
<label for="Uklanjanje slika">Uklanjanje slika</label>
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div class="drop-panel" style="position: relative; overflow: hidden; display: block; padding: 2px;"><a href="#imageOverlay22" data-toggle="drop-panel" class="thumbnail">
<img id="image22" class="img-responsive" src="\image\filijale\192971848455d4d775787cb4.79487595.jpg">
</a><div id="imageOverlay22" class="cap-overlay show" style="display: block; width: 345px; height: 321px; position: absolute; z-index: 3; overflow: hidden; left: 0px; top: -321px;">
<div class="content">
<a href="javascript:obrisiSliku('22', 'filijale')" class="button small"><h5>Obriši sliku</h5></a>
</div>
</div></div>
</div>
</div>
</div>
<div class="form-group">
</div>
<div class="form-group">
<label for="Dodavanje slika">Dodavanje slika</label>
<div class="dropzone" id="edit_filijala_dropzone">
</div>
</div>
<div class="form-group">
<input id="edit_filijala_submit" type="submit" value="Ažuriraj filijalu">
</div>
</form>
</div>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.hcaptions.js"></script>
<script src="/js/slike_akcije.js"></script>
<script src="/js/dropzone.js"></script>
<script src="/js/dropzone_options.js"></script>
<script>
$(window).load(function ()
$('[data-toggle=drop-panel]').hcaptions();
);
</script>
</body></html>
【问题讨论】：
知道错误会很有帮助.. @iam-decoder Chrome 开发工具说：“未捕获的错误：未提供 URL”，如问题中所述。 能不能把生成的html贴出来... @Hackerman 编辑已发布。 我用你的信息构建了一个小提琴......它没有显示错误：jsfiddle.net/robertrozas/zL8LbqLb 【参考方案1】：在设置选项之前添加此行
Dropzone.autoDiscover = false;
【讨论】：
在 jQuery onReady("document") 之外将 autoDiscover 设置为 false 也可能很有用。如果您等待文档准备好，dropzone 将已经尝试在页面中查找 dropzone 元素。以上是关于Dropzone 在本地主机上正常工作，在远程服务器上引发错误的主要内容，如果未能解决你的问题，请参考以下文章
Datatables 插件在本地主机上工作正常，但在服务器（CPanel）上不工作
$.post & AJAX 在服务器上不工作，但在本地主机上工作正常
Instagram api 在本地主机上工作正常，但在服务器上发送错误 (https://www.instagram.com/$name/?__a=1)