-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.htm
1281 lines (924 loc) · 73.5 KB
/
index.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<meta charset=utf-8"utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- tiptheweb.org -->
<meta name="ttw" content="dt7xvsr" />
<title>Dropzone.js</title>
<meta name="description" value="DropzoneJS is an open source library that provides beautiful and easy to use drag'n'drop file uploads with image previews." />
<meta name="keywords" value="javascript dragndrop drag and drop drag'n'drop file upload image preview coffeescript" />
<link rel="stylesheet" href="dropzone.css-v=1423494334.css" tppabs="http://www.dropzonejs.com/css/dropzone.css?v=1423494334" />
<link rel="stylesheet" href="style.css-v=1423494334.css" tppabs="http://www.dropzonejs.com/css/style.css?v=1423494334" />
<link href="css-family=Roboto-400,300,500,300italic-Inconsolata-400,700.css" tppabs="http://fonts.googleapis.com/css?family=Roboto:400,300,500,300italic|Inconsolata:400,700" rel='stylesheet' type='text/css'>
<script src="fastclick.js" tppabs="http://www.dropzonejs.com/new-js/fastclick.js"></script>
<script src="app.js-v=1423494334" tppabs="http://www.dropzonejs.com/new-js/app.js?v=1423494334"></script>
<script src="dropzone.js-v=1423494334" tppabs="http://www.dropzonejs.com/new-js/dropzone.js?v=1423494334"></script>
<script>Dropzone.autoDiscover = false;</script>
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon-180x180.png">
<meta name="apple-mobile-web-app-title" content="Dropzone">
<link rel="shortcut icon" href="/favicons/favicon.ico">
<link rel="icon" type="image/png" href="/favicons/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicons/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#0087f7">
<meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="/favicons/browserconfig.xml">
<meta name="application-name" content="Dropzone">
<!-- <link rel="stylesheet" href="http://basehold.it/30"> -->
<body itemscope itemtype="http://schema.org/WebApplication">
<!-- Facebook like button -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "sdk.js#xfbml=1&appId=348563131842547&version=v2.0"/*tpa=http://connect.facebook.net/en_US/sdk.js#xfbml=1&appId=348563131842547&version=v2.0*/;
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<header>
<div class="content">
<h1>
<img itemprop="image" itemprop="image" src="new-logo.svg" tppabs="http://www.dropzonejs.com/images/new-logo.svg" alt="Logo">
<span itemprop="name">dropzone.js</span>
</h1>
<h2 itemprop="description">DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.</h2>
<p>
它是轻量级的，不依赖任何其他类库（如JQuery）并且<a href="http://www.dropzonejs.com/bootstrap.html">高度可定制</a>.
</p>
<p class="scroll-invitation">
<a href="#try-it-out"><span>Scroll down!</span></a>
</p>
</div>
<section id="social-buttons">
<div class="social-button">
<iframe src="http://ghbtns.com/github-btn.html?user=enyo&repo=dropzone&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe>
</div>
<div class="social-button">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.dropzonejs.com" data-text="#DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews" data-via="matenyo">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="widgets.js"/*tpa=http://platform.twitter.com/widgets.js*/;fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="social-button facebook-social-button">
<div class="fb-like" data-href="index.htm" tppabs="http://www.dropzonejs.com/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
</div>
<div class="social-button">
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium" data-href="index.htm" tppabs="http://www.dropzonejs.com/"></div>
</div>
<div class="social-button">
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'plusone.js'/*tpa=https://apis.google.com/js/plusone.js*/;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</section>
</header>
<main>
<nav>
<a class="logo" href="#"><img src="new-logo-icon.svg" tppabs="http://www.dropzonejs.com/images/new-logo-icon.svg" alt="Logo"></a>
</nav>
<section>
<h1 id="try-it-out">试试看!</h1>
<div id="dropzone"><form action="javascript:if(confirm('http://www.torrentplease.com/dropzone.php \n\n¸ÃÎļþÎÞ·¨Óà Teleport Ultra ÏÂÔØ, ÒòΪ ËüÊÇÒ»¸öÓò»ò·¾¶Íⲿ±»ÉèÖÃΪËüµÄÆôʼµØÖ·µÄµØÖ·¡£ \n\nÄãÏëÔÚ·þÎñÆ÷ÉÏ´ò¿ªËü?'))window.location='http://www.torrentplease.com/dropzone.php'" tppabs="http://www.torrentplease.com/dropzone.php" class="dropzone" id="demo-upload">
<div class="dz-message">
将文件拖至此处或点击上传.<br />
<span class="note">(这仅仅是 dropzone 的一个演示示例. 选定的文件 <strong>并没有</strong> 真正上传.)</span>
</div>
</form></div>
</section>
<section class="news">
<h1 id="news">新闻</h1>
<p>我刚刚发布 Dropzone <strong>v4.0.0</strong>! 它已经完全重新设计, 并已更新的网站. 非常感谢 <a href="http://www.weare1910.com/">1910</a>
设计新的 logo 和网站. 它看起来非常棒. 看看他们的工作!</p>
<p>我在 COLORGLARE 上最新的文章: <a href="http://www.colorglare.com/2014/11/24/stateless-html.html">Stop writing stateful HTML</a>.
如果你对我的工作感兴趣，请订阅我的 <a href="http://www.colorglare.com/feed.xml">RSS 源</a>.</p>
<p><strong>我的乐队, <em>Gin Ga</em>, 最近发布了一张新专辑 !</strong> 它叫做«YES / NO» 已经可以在 Spotify 和 <a href="https://itunes.apple.com/at/album/yes-no/id722931771"> iTunes </a>商店下载.
你可以看到我们 <a href="http://youtu.be/3EPWhYmgdJk">在 youtube 上最新的视频剪辑</a>.</p>
</section>
<section>
<h1 id="installation">安装</h1>
<p>你也许只要看一下这个 <a href="http://www.dropzonejs.com/examples/simple.html">简单示例</a> (<a href="https://github.com/enyo/dropzone/blob/gh-pages/examples/simple.html">源代码</a>)
就可以开始. 继续一步一步学习下面的知道和不同的安装方法.</p>
<hr />
<p>下载单独的 <a href="https://raw.github.com/enyo/dropzone/master/dist/dropzone.js">dropzone.js</a> 并像下面这样在文件中引入:</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">"./path/to/dropzone.js"</span><span class="nt">></script></span></code></pre></div>
<p>现在,Dropzone 已经被激活，用<code>window.Dropzone</code>来使用.</p>
<blockquote>
<p>Dropzone <em>不会</em> 处理你上传到服务器上面的文件. 你必须自己编写代码实现接受和保存上传的文件. 请参考
<a href="#server-side-implementation">服务器端实现</a>部分的详细信息.</p>
</blockquote>
<p>这是你需要运行dropzone上传代码的所有工作, 但是如果你想要让你的dropzone拥有和本页面上的dropzone一样的效果, 你就需要从 <a href="https://github.com/enyo/dropzone/tree/master/dist">dist 文件夹</a>中下载样式文件 <strong>dropzone.css</strong>.</p>
<h2 id="with-component">使用组件</h2>
<p>如果你要使用 <a href="https://github.com/component/component">组件</a> 你只需要添加 dropzone 作为一个依赖:</p>
<pre><code>"enyo/dropzone": "*"
</code></pre>
<p>然后就像下面这样引入:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Dropzone</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">"dropzone"</span><span class="p">);</span></code></pre></div>
<p>这样他就被激活了并自动扫描文档.</p>
<p>基础的CSS样式也被包含在组件中, 但是如果你想让它看起来和本页一样, 你就必须现在CSS文件 (见下文).</p>
<h2 id="with-requirejs">使用 RequireJS</h2>
<p>Dropzone is also available as an <a href="https://github.com/amdjs/amdjs-api/wiki/AMD">AMD module</a>
for <a href="http://requirejs.org/">RequireJS</a>.</p>
<p>You can find the <a href="https://raw.github.com/enyo/dropzone/master/dist/dropzone-amd-module.js">dropzone-amd-module</a>
in the downloads folder.</p>
</section>
<section>
<h1 id="usage">用法</h1>
<p>使用dropzone的典型方式是通过创建一个 class 属性中包含 <code>dropzone</code> 的form 表单元素 :</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">action=</span><span class="s">"/file-upload"</span>
<span class="na">class=</span><span class="s">"dropzone"</span>
<span class="na">id=</span><span class="s">"my-awesome-dropzone"</span><span class="nt">></form></span></code></pre></div>
<p>就是这么简单，Dropzone将查找所有的 class 属性中包含 dropzone 的表单元素,
的表单元素，自动地把自己加入到表单元素上，并且拖拽进的这些上传文件将被发送到 <code>action</code> 这个特殊的参数. 这些上传文件将被正常处理就像这里是一段像下面这样的HTML代码:</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">name=</span><span class="s">"file"</span> <span class="nt">/></span></code></pre></div>
<p>如果你想使用其他的名字来替换 <code>file</code> 你可以在 <a href="#configuration">configure dropzone</a>
中设置选项 <code>paramName</code>.</p>
<blockquote>
<p>如果你正在使用组件，别忘记 <code>require("dropzone");</code> 否则他将不会被激活.</p>
</blockquote>
<p>如果你想要你的文件上传正确工作，甚至在没有JavaScript环境中, 你可以引入一个 class是 <code>fallback</code>的元素, 在浏览器支持的情况下, dropzone会删除这个元素 . 如果浏览器不支持, Dropzone 将不会删除 fallback
元素,前提是你提供了这个元素. (显然, 如果浏览器不支持JavaScript,form将保持原来的样子)</p>
<p>通常会看起来像这样:</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">action=</span><span class="s">"/file-upload"</span> <span class="na">class=</span><span class="s">"dropzone"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"fallback"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">name=</span><span class="s">"file"</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">multiple</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="nt"></form></span></code></pre></div>
<h2 id="create-dropzones-programmatically">程序化的方式创建 dropzones </h2>
<p>或者你可以程序化方式创建 dropzones (甚至不在 <code>form</code>
元素上) 通过初始化一个 <code>Dropzone</code> 类对象</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Dropzone class:</span>
<span class="kd">var</span> <span class="nx">myDropzone</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Dropzone</span><span class="p">(</span><span class="s2">"div#myId"</span><span class="p">,</span> <span class="p">{</span> <span class="nx">url</span><span class="o">:</span> <span class="s2">"/file/post"</span><span class="p">});</span></code></pre></div>
<p>或者如果您使用 jQuery，您可以使用 Dropzone 附带的 jQuery 插件:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// jQuery</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"div#myId"</span><span class="p">).</span><span class="nx">dropzone</span><span class="p">({</span> <span class="nx">url</span><span class="o">:</span> <span class="s2">"/file/post"</span> <span class="p">});</span></code></pre></div>
<blockquote>
<p>不要忘记指定<code>url</code>选项如果您不使用窗体元素，因为 Dropzone 不知道在哪儿发布到无<code>action</code>属性.</p>
</blockquote>
<h2 id="server-side-implementation">服务器端实现</h2>
<p>Dropzone 并不提供服务器端实现的处理文件，但是文件的方式都是上传就等于像这样简单的文件上传表单:</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">action=</span><span class="s">""</span> <span class="na">method=</span><span class="s">"post"</span> <span class="na">enctype=</span><span class="s">"multipart/form-data"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">name=</span><span class="s">"file"</span> <span class="nt">/></span>
<span class="nt"></form></span></code></pre></div>
<p>若要处理服务器上的基本文件上传，请看看相应的文件中的处理方法。这里只提供了一些，如果你认为我应该添加一些，请与我联系.</p>
<ul>
<li><a href="http://howtonode.org/really-simple-file-uploads">NodeJS with express</a></li>
<li><a href="http://guides.rubyonrails.org/form_helpers.html#uploading-files">Ruby on rails</a></li>
<li><a href="http://www.startutorial.com/articles/view/how-to-build-a-file-upload-form-using-dropzonejs-and-php">Complete PHP tutorial</a> by startutorial.com</li>
<li><a href="http://www.php.net/manual/en/features.file-upload.post-method.php#example-354">Basic PHP file upload</a></li>
<li><a href="http://maxoffsky.com/code-blog/howto-ajax-multiple-file-upload-in-laravel/">Tutorial for Dropzone and Lavarel (PHP)</a> written by Maksim Surguy</li>
<li><a href="http://www.jesuisundev.fr/upload-drag-drop-via-dropzonejs-symfony2-on-cloud-amazon-s3/">Symfony2 and Amazon S3</a></li>
<li><a href="http://venkatbaggu.com/file-upload-in-asp-net-mvc-using-dropzone-js-and-html5/">File upload in ASP.NET MVC using Dropzone JS and HTML5</a></li>
</ul>
<p>付费文档:</p>
<ul>
<li><a href="http://www.startutorial.com/homes/dropzonejs_php_the_complete_guide?utm_source=dzj&utm_medium=banner&utm_campaign=dropzonejs">eBook for Dropzone with PHP</a> by startutorial.com.</li>
</ul>
<p>请如果您需要更多的信息看<a href="https://github.com/enyo/dropzone/wiki/FAQ">Dropzone FAQ</a>.</p>
</section>
<section>
<h1 id="configuration">配置</h1>
<p>这里有两种方式配置 dropzones.</p>
<p>最明显的方式是通过程序化的方法实例化一个dropzone 对象, 就像上一节 <a href="#create-dropzones-programmatically">create dropzones programmatically</a>看到的一样.</p>
<p>但是如果你仅仅使用一个class是 <code>dropzone</code>的HTML元素, 不想以程序化的方式实例化一个对象, 所以你就必须在某个地方保存配置信息以便让 Dropzone 实例化dropzones的HTML元素时知道如果配置它们.</p>
<p>通过使用 <code>Dropzone.options</code> 对象.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// "myAwesomeDropzone" is the camelized version of the HTML element's ID</span>
<span class="c1">// "myAwesomeDropzone" 是dropzone的HTML元素ID的驼峰命名</span>
<span class="nx">Dropzone</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">myAwesomeDropzone</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">paramName</span><span class="o">:</span> <span class="s2">"file"</span><span class="p">,</span> <span class="c1">// The name that will be used to transfer the file</span>
<span class="nx">maxFilesize</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> <span class="c1">// MB</span>
<span class="nx">accept</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">file</span><span class="p">,</span> <span class="nx">done</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">file</span><span class="p">.</span><span class="nx">name</span> <span class="o">==</span> <span class="s2">"justinbieber.jpg"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">done</span><span class="p">(</span><span class="s2">"Naha, you don't."</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span> <span class="nx">done</span><span class="p">();</span> <span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span></code></pre></div>
<p>如果您想要禁用自动发现 Dropzone 行为, 你也可以在每个元素基础或在一般全局上禁用它:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Prevent Dropzone from auto discovering this element:</span>
<span class="c1">// 阻止 Dropzone 自动寻找这个元素:</span>
<span class="nx">Dropzone</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">myAwesomeDropzone</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="c1">// This is useful when you want to create the</span>
<span class="c1">// Dropzone programmatically later</span>
<span class="c1">// Disable auto discover for all elements:</span>
<span class="c1">// 禁止对所有元素的自动查找:</span>
<span class="nx">Dropzone</span><span class="p">.</span><span class="nx">autoDiscover</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span></code></pre></div>
<h2 class="anchor" id="configuration-options">配置项</h2>
<table>
<thead>
<tr><th class="title" colspan="2"><div class="header">配置项</div></th></tr>
<tr><th>选项</th><th>描述</th></tr>
</thead>
<tbody>
<tr id="config-url">
<td><a href="#config-url"><code>url</code></a></td>
<td>
必须被设置,当dropzone在 form 表单以外的元素上时[译者注:dropzone不一定要在form元素上，也可以在一个div上，这里的意思就是假如在一个div上时必须设置URL](或者form表单没有 <code>action</code> 属性). 你也可以提供一个被 <code>files</code>调用的函数 并且必须返回 url (从 <code>v3.12.0</code>开始)
</td>
</tr><tr id="config-method">
<td><a href="#config-method"><code>method</code></a></td>
<td>
默认<code>"post"</code> 如有必要也可以修改成
<code>"put"</code> . 你也可以提供一个被 <code>files</code>调用的函数 并且必须返回 method (since <code>v3.12.0</code>)
</td>
</tr><tr id="config-parallelUploads">
<td><a href="#config-parallelUploads"><code>parallelUploads</code></a></td>
<td>
有多少文件将上载到并行处理 (见
<em>进行排队文件上传</em> 部分获取更多信息)[译者注：本人在使用过程发现：当使用手动上传时，每次只能上传两个文件，这样需要多次点击才能实现所有上传，最后学习了一下 Enqueuing file uploads 里面的关于自动上传时的处理流程，设置了这里的参数时，才能一下子全部队列上传]
</td>
</tr><tr id="config-maxFilesize">
<td><a href="#config-maxFilesize"><code>maxFilesize</code></a></td>
<td>以MB为单位[译者注：上传文件的大小限制]</td>
</tr><tr id="config-filesizeBase">
<td><a href="#config-filesizeBase"><code>filesizeBase</code></a></td>
<td>
默认值为 <code>1000</code>. 这个选项将设置在计算文件大小时使用
<code>1000</code> 还是使用 <code>1024</code>作为基本单位. <code>1000</code> 是正确的, 因为 <code>1000 Bytes</code>
等于 <code>1 Kilobyte</code>, <code>1024 Bytes</code> 等于
<code>1 Kibibyte</code>. 如果你不在乎有效性，您可以更改这个选项为 <code>1024</code> .
</td>
</tr><tr id="config-paramName">
<td><a href="#config-paramName"><code>paramName</code></a></td>
<td>
设置传输文件名称参数. 默认是
<code>file</code>. <strong>注意</strong>: 如果你将配置项
<code>uploadMultiple</code> 设置为 <code>true</code>, 那么
Dropzone 将在paramName设置的name的后面追加 <code>[]</code>.
</td>
</tr><tr id="config-uploadMultiple">
<td><a href="#config-uploadMultiple"><code>uploadMultiple</code></a></td>
<td>
是否 Dropzone 应该在一个请求中发送多个文件. 如果此设置为 true，然后fallbach 中 input 的元素将具有<code>multiple</code>属性. 此选项还会触发其他事件 (如
<code>processingmultiple</code>). 请参阅事件部分了解更多信息.
</td>
</tr><tr id="config-headers">
<td><a href="#config-headers"><code>headers</code></a></td>
<td>
要向服务器发送的其他头文件的对象. 例如:
<code>headers: { "My-Awesome-Header": "header value" }</code>
</td>
</tr><tr id="config-addRemoveLinks">
<td><a href="#config-addRemoveLinks"><code>addRemoveLinks</code></a></td>
<td>
在每个预览文件下面添加一个remove[删除]或者cancel[取消](如果文件已经上传)上传文件的链接[译者注：这里的删除和取消只是从上传队列中取消了，并没有在服务器上删除]. <code>dictCancelUpload</code>,
<code>dictCancelUploadConfirmation</code> 和
<code>dictRemoveFile</code> 这三个配置项用来自定义设置相应操作链接的显示文字.[本项设置时布尔值，true开启/false关闭]
</td>
</tr><tr id="config-previewsContainer">
<td><a href="#config-previewsContainer"><code>previewsContainer</code></a></td>
<td>
定义文件预览显示位置， 定义为 <code>null</code> 时，
将会消失在Dropzone 元素中. 可以设置成一个HTML元素或者一个CSS选择器. 这个元素的class中应该包含<code>dropzone-previews</code> 以便正确显示预览.
</td>
</tr><tr id="config-clickable">
<td><a href="#config-clickable"><code>clickable</code></a></td>
<td>
若果设置 <code>true</code>, dropzone 元素本身将可以点击, 如果设置 <code>false</code> dropzone没有地方可供点击.
否则你也可以通过一个HTML元素，一个CSS选择器（多个HTML元素）或者其他的数组.
</td>
</tr><tr id="config-createImageThumbnails">
<td><a href="#config-createImageThumbnails"><code>createImageThumbnails</code></a></td>
<td></td>
</tr><tr id="config-maxThumbnailFilesize">
<td><a href="#config-maxThumbnailFilesize"><code>maxThumbnailFilesize</code></a></td>
<td>
以MB为单位[译者注：也可以使用小数]. 当文件名[译者注:这问是filename，但是测试后发现应该是出错了这里应该是指文件大小]超出这里的设置, 将不会生成缩略图.
</td>
</tr><tr id="config-thumbnailWidth">
<td><a href="#config-thumbnailWidth"><code>thumbnailWidth</code></a></td>
<td>
默认 <code>null</code>, 设置缩略图的缩略比[译者注：设置width，配合下面的thumbnailHeight一起使用].
</td>
</tr><tr id="config-thumbnailHeight">
<td><a href="#config-thumbnailHeight"><code>thumbnailHeight</code></a></td>
<td>
就像 <code>thumbnailWidth</code>一样. 如果为空, 将不能重置尺寸.
</td>
</tr><tr id="config-maxFiles">
<td><a href="#config-maxFiles"><code>maxFiles</code></a></td>
<td>
如果不为 <code>null</code> ，这里设置 Dropzone 最多可以处理多少文件. 如果超过这个限制, <code>maxfilesexceeded</code> 事件将被调用. dropzone 将通过 class 为<code>dz-max-
files-reached</code> 反馈一些信息给你.
</td>
</tr><tr id="config-resize">
<td><a href="#config-resize"><code>resize</code></a></td>
<td>
is the function that gets called to create the resize information.
It gets the <code>file</code> as first parameter and must return
an object with <code>srcX</code>, <code>srcY</code>,
<code>srcWidth</code> and <code>srcHeight</code> and the same for
<code>trg*</code>. Those values are going to be used by
<code>ctx.drawImage()</code>.
</td>
</tr><tr id="config-init">
<td><a href="#config-init"><code>init</code></a></td>
<td>
Dropzone初始化时调用的函数，你可以在这个方法中设置时间监听.
</td>
</tr><tr>
<td><strike><code>acceptedMimeTypes</code></strike></td>
<td>
已经废弃， 使用<code>acceptedFiles</code>代替
</td>
</tr><tr id="config-acceptedFiles">
<td><a href="#config-acceptedFiles"><code>acceptedFiles</code></a></td>
<td>
<code>accept</code>实现检查文件的 mime 类型或扩展名， 使用逗号分隔文件类型或者扩展名列表. 例如 Eg.:
<code>image/*,application/pdf,.psd</code>. 如果 Dropzone 是
<code>clickable</code>[译者注：即配置项clickable是true], 本项将被用作
<a href="https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-accept"><code>accept</code></a>
的参数，就和在 隐藏的
file input 一样.
</td>
</tr><tr id="config-accept">
<td><a href="#config-accept"><code>accept</code></a></td>
<td>
使用一个
<a href="https://developer.mozilla.org/en-US/docs/DOM/File">file</a>
和一个<code>done</code> 函数 作为参数的函数. 如果不带参数调用 done 函数时，将处理该文件. 如果你显示一条错误信息，该文件将不会被上传. 如果文件太大或不匹配的 mime 类型，将不调用此函数.
</td>
</tr><tr>
<td>
<strike><code>enqueueForUpload</code></strike>
</td>
<td>
已废弃，被 <code>autoProcessQueue</code>取代.
</td>
</tr><tr id="config-autoProcessQueue">
<td><a href="#config-autoProcessQueue"><code>autoProcessQueue</code></a></td>
<td>
当设置 <code>false</code> 你必须自己像这样
<code>myDropzone.processQueue()</code> 的调用来上传队列中的上传文件. 请参阅下面有关处理队列的详细信息.
</td>
</tr><tr id="config-previewTemplate">
<td><a href="#config-previewTemplate"><code>previewTemplate</code></a></td>
<td>
是一个包含预览dropzone上传的每个文件的模板字符串. 更改它以满足您的需求，但请务必提供正确的所有元素. You can 在你的页面中包含
<code><div id="preview-template" style="display: none;"></div></code> 这样的HTML容器, 并且像这样设置: <code>previewTemplate: document.querySelector('preview-template').innerHTML</code>.
</td>
</tr><tr id="config-forceFallback">
<td><a href="#config-forceFallback"><code>forceFallback</code></a></td>
<td>
默认 <code>false</code>. 如果设置<code>true</code> 将强制使用 fallback .这在测试你的服务器端实现和确保一切如你预期的一样正常工作在没有使用dropzone的情况下，防止你一些经验上的错误，同时可以给你展示fallbacks是怎样显示的 .
</td>
</tr><tr id="config-fallback">
<td><a href="#config-fallback"><code>fallback</code></a></td>
<td>
这是一个方法，当浏览器不支持的时候调用.
默认实现展示 fallback input 字段 和一段文本.
</td>
</tr><tr>
<td class="separator" colspan="2">若要翻译 dropzone，还可以提供这些选项：</td>
</tr><tr id="config-dictDefaultMessage">
<td><a href="#config-dictDefaultMessage"><code>dictDefaultMessage</code></a></td>
<td>
获取显示之前的任何文件被删除的消息。这通常是由图像，但默认为"Drop files here
to upload"所取代
</td>
</tr><tr id="config-dictFallbackMessage">
<td><a href="#config-dictFallbackMessage"><code>dictFallbackMessage</code></a></td>
<td>
如果浏览器不受支持，此文本将替换默认的消息。默认值为"Your browser does not
support drag'n'drop file uploads."
</td>
</tr><tr id="config-dictFallbackText">
<td><a href="#config-dictFallbackText"><code>dictFallbackText</code></a></td>
<td>
这点文本将在 file input元素选择文件前显示 . 如果你自己提供了
fallback 元素, 或者本项设置成 <code>null</code> 这段文本将被忽略. 默认是 "Please use the fallback form below "
</td>
</tr><tr id="config-dictInvalidFileType">
<td><a href="#config-dictInvalidFileType"><code>dictInvalidFileType</code></a></td>
<td>
如果该文件与文件类型不匹配所示的错误消息.
</td>
</tr><tr id="config-dictFileTooBig">
<td><a href="#config-dictFileTooBig"><code>dictFileTooBig</code></a></td>
<td>
当显示该文件太大。<code>{{filesize}}</code> 和
<code>{{maxFilesize}}</code> 将被替换.
</td>
</tr><tr id="config-dictResponseError">
<td><a href="#config-dictResponseError"><code>dictResponseError</code></a></td>
<td>
如果服务器响应无效时的错误消息。<code>{{statusCode}}</code>将被替换的服务器状态代码
</td>
</tr><tr id="config-dictCancelUpload">
<td><a href="#config-dictCancelUpload"><code>dictCancelUpload</code></a></td>
<td>
如果<code>addRemoveLinks</code>为 true，这段文本用来设置取消上载链接的文本
</td>
</tr><tr id="config-dictCancelUploadConfirmation">
<td><a href="#config-dictCancelUploadConfirmation"><code>dictCancelUploadConfirmation</code></a></td>
<td>
如果<code>addRemoveLinks</code>为 true，这里设置的文本将用于确认取消上载时显示.
</td>
</tr><tr id="config-dictRemoveFile">
<td><a href="#config-dictRemoveFile"><code>dictRemoveFile</code></a></td>
<td>
如果<code>addRemoveLinks</code>为 true，这段文本用来设置删除文件显示文本.
</td>
</tr><tr id="config-dictMaxFilesExceeded">
<td><a href="#config-dictMaxFilesExceeded"><code>dictMaxFilesExceeded</code></a></td>
<td>
如果设置了<code>maxFiles</code> ，这里设置的文本将在文件超出maxfiles设置值时显示.
</td>
</tr>
</tbody>
</table>
<blockquote>
<p>您也可以重写所有的选项中的默认事件操作. 所以如果您提供选项 <code>drop</code> 你可以重写默认的 <code>drop</code> 事件处理.
<em>如果你打算这样做，那么你应该对这些代码有所熟悉，因为你可以很容易打断上传程序 </em>
如果你仅仅想要做像在这里或者哪里添加一些 class, 那么添加<strong><a href="#events">事件侦听器</a> 是最好的方法</strong>!</p>
</blockquote>
<h2 id="enqueuing-file-uploads">队列文件上传</h2>
<p>当一个文件被添加到 dropzone 时, 它的 <code>status</code> 就被设置成了 <code>Dropzone.QUEUED</code>
(前提是已经通过了 <code>accept</code> 函数的检查) ,这就意味着这个文件已经在上传队列中了.</p>
<p>如果你设置了选项 <code>autoProcessQueue</code> 为 <code>true</code>, 然后队列就会被立即处理, 在文件拖放到zone或者上传完成后, 调用
<code>.processQueue()</code> 来检查当前有多少文件正在被上传,
如果它的值[译者注：processQueue()返回的文件数] 小于 <code>options.parallelUploads</code>的设置值时, 就会调用<code>.processFile(file)</code>.</p>
<p>如果你设置 <code>autoProcessQueue</code> 为 <code>false</code>, 那么 <code>.processQueue()</code> 方法是不会被隐式调用的. 这意味着你必须在你想要上传队列中的所有文件时，自己去调用这个方法[译者注：这是很有用的，当我们使用点击按钮上传时，我们就可以设置这里为false，同时我们也应该清楚：这里的手动上传和上面所说的自动上传的实现逻辑是一样的，只是这里我们让程序不去自动上传； 所以在前面说到的关于，多个文件点击上传时每次只能同时上传两个，需要很多次点击，如果我们要一次点击上传全部，我们就应该理解上面自动提交时的逻辑，设置options.parallelUploads，这是本人使用时发现的问题].</p>
<h2 id="layout">布局</h2>
<p> 这是用选项<code>previewTemplate</code>定义的一段用来显示每个dropzone上传文件预览的HTML代码 ，其默认HTML是这样的:</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dz-preview dz-file-preview"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dz-details"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dz-filename"</span><span class="nt">><span</span> <span class="na">data-dz-name</span><span class="nt">></span></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dz-size"</span> <span class="na">data-dz-size</span><span class="nt">></div></span>
<span class="nt"><img</span> <span class="na">data-dz-thumbnail</span> <span class="nt">/></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dz-progress"</span><span class="nt">><span</span> <span class="na">class=</span><span class="s">"dz-upload"</span> <span class="na">data-dz-uploadprogress</span><span class="nt">></span></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dz-success-mark"</span><span class="nt">><span></span>✔<span class="nt"></span></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dz-error-mark"</span><span class="nt">><span></span>✘<span class="nt"></span></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dz-error-message"</span><span class="nt">><span</span> <span class="na">data-dz-errormessage</span><span class="nt">></span></div></span>
<span class="nt"></div></span></code></pre></div>
<p> 在容器 (<code>dz-preview</code>) 中， <code>dz-processing</code> 是文件上传时的显示样式, <code>dz-success</code> 是文件上传成功时显示 and <code>dz-error</code> 是文件没有上传时显示样式.
最后一个, <code>data-dz-errormessage</code> 将包含服务器返回的文本信息.</p>
<p>想要重写默认的模板, 使用配置项 <a href="#config-previewTemplate"><code>previewTemplate</code></a>
config.</p>
<p>你可以在任何事件中访问文件预览的HTML 通过使用 <code>file.previewElement</code>.</p>
<p>如果你决定从零开始重新 <code>previewTemplate</code> , 你应该在里面放上用<code>data-dz-*</code>参数定义的元素 :</p>
<ul>
<li><code>data-dz-name</code></li>
<li><code>data-dz-size</code></li>
<li><code>data-dz-thumbnail</code> (这里必须是一个 <code><img /></code> 元素 ，并且<code>alt</code> 和 <code>src</code> 属性将被 Dropzone改变)</li>
<li><code>data-dz-uploadprogress</code> ( 当这里有一个 <code>uploadprogress</code>事件时， Dropzone 将更改 <code>style.width</code> 属性从 <code>0%</code> 到 <code>100%</code> )</li>
<li><code>data-dz-errormessage</code></li>
</ul>
<p>Dropzone 的默认选项将寻找这些元素，并为它更新的内容.</p>
<p>如果你想要一些特殊的链接来删除文件(而不是使用内置的 <a href="#config-addRemoveLinks"><code>addRemoveLinks</code></a>配置 ), 你可以简单地在模板中插入一个属性值是 <code>data-dz-remove</code> 的HTML元素. 例如:</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><img</span> <span class="na">src=</span><span class="s">"removebutton.png"</span> <span class="na">alt=</span><span class="s">"Click me to remove the file."</span> <span class="na">data-dz-remove</span> <span class="nt">/></span></code></pre></div>
<p>并不强制要求你去配置修改这些，如果你重写了所有的默认事件侦听器，你完全可以从零开始重建你的布局.</p>
<p>如果你想让你的dropzone看起来和本页显示一样的效果，应该如何添加样式表和脚本？请参阅安装部分.</p>
<p>请参阅<a href="#theming">Theming</a>部分 较为深入看看如何改变 Dropzone 的用户界面.</p>
<p>我创建了一个例子，我只是用来几行简单的配置，就让 Dropzone 看起来和感觉起来跟 jQuery 上传文件的方式完全一样. <a href="bootstrap.html" tppabs="http://www.dropzonejs.com/bootstrap.html">Check it out!</a></p>
<blockquote>
<p>再次, 如果你仍然不清楚某些功能，请去看看 <a href="https://github.com/enyo/dropzone/wiki/FAQ">Dropzone FAQ</a> .</p>
</blockquote>
<h2 id="dropzone-methods">Dropzone 方法</h2>
<p>如果你想删除已添加到dropzone中的文件，你可以调用 <code>.removeFile(file)</code>.
这个方法也可以触发 <code>removedfile</code> 事件.</p>
<p>下面是一个当文件上传完成后自动删除文件的示例:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">myDropzone</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">"complete"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">file</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">myDropzone</span><span class="p">.</span><span class="nx">removeFile</span><span class="p">(</span><span class="nx">file</span><span class="p">);</span>
<span class="p">});</span></code></pre></div>
<p>如果你想删除所有的文件，简单的使用<code>.removeAllFiles()</code>就可以了.这样调用删除文件并不会删除正在被上传的文件. 如果你想要取消正在上传的文件, 调用 <code>.removeAllFiles(true)</code> 将会取消正在上传的文件.</p>
<hr />
<p>如果你设置 <code>autoProcessQueue</code> 禁用了自动上传, 你需要自己调用<code>.processQueue()</code>.</p>
<p>这是很有用的，如果你想显示文件让用户点击确认按钮来上传文件.</p>
<hr />
<p>若要访问 dropzone 中的所有文件，请使用 <code>myDropzone.files</code>[译者注： 这里的myDropzone指的是dropzone对象，files是下面的这些方法].</p>
<p>要获得</p>
<ul>
<li>所有接受文件: <code>.getAcceptedFiles()</code></li>
<li>所有被拒绝的文件: <code>.getRejectedFiles()</code></li>
<li>所有排队的文件: <code>.getQueuedFiles()</code></li>
<li>所有上传文件: <code>.getUploadingFiles()</code></li>
</ul>
<hr />
<p>如果你不再需要 dropzone , 只需要dropzone对象上调用 <code>.disable()</code> . 这将移除元素上所有的事件监听, 并且清除所有的文件数组. 若要重启Dropzone使用 <code>.enable()</code>.</p>
<hr />
<p>如果你不喜欢浏览器默认的 <code>confirm</code> 对话框,
你可以通过重写 <code>Dropzone.confirm</code>来替换它们.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">Dropzone</span><span class="p">.</span><span class="nx">confirm</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">question</span><span class="p">,</span> <span class="nx">accepted</span><span class="p">,</span> <span class="nx">rejected</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// Ask the question, and call accepted() or rejected() accordingly.</span>
<span class="c1">// CAREFUL: rejected might not be defined. Do nothing in that case.</span>
<span class="p">};</span></code></pre></div>
</section>
<section>
<h1 id="events">事件</h1>
<p>当处理文件时触发事件, 你可以通过调用 <code>.on(eventName, callbackFunction)</code> 很容易地在你的 <em>instance[实例]</em>注册事件监听.</p>
<p>事件监听器只能在Dropzone的<em>instances[实例]</em> 上注册 , 添加你的事件监听器最好的地方是 在 <code>init</code> 方法中:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// The recommended way from within the init configuration:</span>
<span class="nx">Dropzone</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">myAwesomeDropzone</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">init</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">"addedfile"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">file</span><span class="p">)</span> <span class="p">{</span> <span class="nx">alert</span><span class="p">(</span><span class="s2">"Added file."</span><span class="p">);</span> <span class="p">});</span>
<span class="p">}</span>
<span class="p">};</span></code></pre></div>
<p>If you <a href="#create-dropzones-programmatically">如果你以程序化的方式创建dropzone</a>,
你可以像下面这样在你的实例上注册事件监听器:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// This example uses jQuery so it creates the Dropzone, only when the DOM has</span>
<span class="c1">// loaded.</span>
<span class="c1">// Disabling autoDiscover, otherwise Dropzone will try to attach twice.</span>
<span class="nx">Dropzone</span><span class="p">.</span><span class="nx">autoDiscover</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="c1">// or disable for specific dropzone:</span>
<span class="c1">// Dropzone.options.myDropzone = false;</span>
<span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// Now that the DOM is fully loaded, create the dropzone, and setup the</span>
<span class="c1">// event listeners</span>
<span class="kd">var</span> <span class="nx">myDropzone</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Dropzone</span><span class="p">(</span><span class="s2">"#my-dropzone"</span><span class="p">);</span>
<span class="nx">myDropzone</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">"addedfile"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">file</span><span class="p">)</span> <span class="p">{</span>
<span class="cm">/* Maybe display some more file information on your page */</span>
<span class="p">});</span>
<span class="p">})</span></code></pre></div>
<p>这是有点更复杂，也没有必要，除非你有一个好的理由以编程方式实例化dropzone.</p>
<blockquote>
<p>Dropzone 本身依赖于事件. 你看到的所以事情都是通过事件监听器完成的. 这些事件侦听在dropzone中都有默认的配置，你可以重写来覆盖这些默认的行为，从而用您自己的事件行为来替换dropzone默认行为.</p>
</blockquote>
<p>当你正真的知道dropzone是怎样工作的，当你想要<a href="#theming-dropzone">完全主题化你的dropzone</a>行为时，你就应该设置这些事件侦听</p>
<h2 class="anchor" id="event-list">事件列表</h2>
<table>
<thead>
<tr><th class="title" colspan="2">
<div class="header">事件列表</div>
<p>
<strong>不要</strong> 在配置项中重写这些事件行为,
除非你清楚你在干什么.
</p>
</th></tr>
<tr><th>参数</th><th>描述</th></tr>
</thead>
<tbody>
<tr>
<td class="separator" colspan="2">
所有这些事件都把
<a href="https://developer.mozilla.org/en-US/docs/DOM/event">event</a>
作为第一个参数:
</td>
</tr><tr id="event-drop">
<td><a href="#event-drop"><code>drop</code></a></td>
<td>用户把文件放到dropzone上</td>
</tr><tr id="event-dragstart">
<td><a href="#event-dragstart"><code>dragstart</code></a></td>
<td>用户开始拖动文件到任何地方</td>
</tr><tr id="event-dragend">
<td><a href="#event-dragend"><code>dragend</code></a></td>
<td>拖动结束</td>
</tr><tr id="event-dragenter">
<td><a href="#event-dragenter"><code>dragenter</code></a></td>
<td>用户把一个文件拖放到dropzone上</td>
</tr><tr id="event-dragover">
<td><a href="#event-dragover"><code>dragover</code></a></td>
<td>用户拖动一个文件在dropzone上</td>
</tr><tr id="event-dragleave">
<td><a href="#event-dragleave"><code>dragleave</code></a></td>
<td>用户拖动一个文件 Dropzone 外面</td>
</tr><tr>
<td class="separator" colspan="2">
下面所有这些都接受
<a href="https://developer.mozilla.org/en-US/docs/DOM/File">file</a>
作为第一个参数:
</td>
</tr><tr id="event-addedfile">
<td><a href="#event-addedfile"><code>addedfile</code></a></td>
<td>
当文件被添加到上传列表
</td>
</tr><tr id="event-removedfile">
<td><a href="#event-removedfile"><code>removedfile</code></a></td>
<td>
任何时候都可以调用这个方法来从上传列表中删除文件. 如果你想从你的服务器上面删除这个文件就可以利用这个监听方法[译者注：一定要清楚，removefile并不会删除服务器上面的文件，你需要自己实现服务器删除代码] .
</td>
</tr><tr id="event-thumbnail">
<td><a href="#event-thumbnail"><code>thumbnail</code></a></td>
<td>
当已生成缩略图。接收 <a href="http://en.wikipedia.org/wiki/Data_URI_scheme">dataUrl</a> 作为第二个参数.
</td>
</tr><tr id="event-error">
<td><a href="#event-error"><code>error</code></a></td>
<td>
出错时. 接受 <code>errorMessage</code> 作为第二个参数，并且如果错误是 XMLHttpRequest对象， 那就作为第三个参数.
</td>
</tr><tr id="event-processing">
<td><a href="#event-processing"><code>processing</code></a></td>
<td>
当一个文件获取处理 （因为不是所有的文件会立即得到处理的队列）。以前，此事件被称为 <code>processingfile</code>.
</td>
</tr><tr id="event-uploadprogress">
<td><a href="#event-uploadprogress"><code>uploadprogress</code></a></td>
<td>
Gets called periodically whenever the file upload progress
changes.<br />
Gets the <code>progress</code> parameter as second parameter which
is a percentage (0-100) and the <code>bytesSent</code> parameter
as third which is the number of the bytes that have been sent to
the server.<br />
When an upload finishes dropzone <em>ensures</em> that
uploadprogress will be called with a percentage of 100 <em>at
least</em> once.<br />
<strong class="warning">Warning:</strong> This function can potentially be called
with the same progress multiple times.
</td>
</tr><tr id="event-sending">
<td><a href="#event-sending"><code>sending</code></a></td>
<td>
在每个文件被发送前调用. 得到 xhr 对象 和
<a href="">formData</a>
对象作为第二个和第三个参数, 所以你可以修改他们(<form></form>add a CSRF token) 或者追加额外的数据.
</td>
</tr><tr id="event-success">
<td><a href="#event-success"><code>success</code></a></td>
<td>
文件已经成功上传，获得服务器返回信息作为第二个参数(这个时间又被称作<code>finished</code>)
</td>
</tr><tr id="event-complete">
<td><a href="#event-complete"><code>complete</code></a></td>
<td>
当上传完成，成功或者出现错误时调用.
</td>
</tr><tr id="event-canceled">
<td><a href="#event-canceled"><code>canceled</code></a></td>
<td>
当取消文件上传式调用
</td>
</tr><tr id="event-maxfilesreached">
<td><a href="#event-maxfilesreached"><code>maxfilesreached</code></a></td>
<td>
当文件的数量达到<code>maxFiles</code>限制时调用.
</td>
</tr><tr id="event-maxfilesexceeded">
<td><a href="#event-maxfilesexceeded"><code>maxfilesexceeded</code></a></td>
<td>
由于文件数量达到 <code>maxFiles</code> 限制数量被拒绝时调用.
</td>
</tr><tr>
<td class="separator" colspan="2">
下面的所有这些接受一个文件列表作为第一个参数，并且仅在 <code>uploadMultiple</code> 设置为true时使用有效:
</td>
</tr><tr id="event-processingmultiple">
<td><a href="#event-processingmultiple"><code>processingmultiple</code></a></td>
<td>查看<code>processing</code> 描述.</td>
</tr><tr id="event-sendingmultiple">
<td><a href="#event-sendingmultiple"><code>sendingmultiple</code></a></td>
<td>查看 <code>sending</code> 描述.</td>
</tr><tr id="event-successmultiple">
<td><a href="#event-successmultiple"><code>successmultiple</code></a></td>
<td>查看 <code>success</code> 描述.</td>
</tr><tr id="event-completemultiple">
<td><a href="#event-completemultiple"><code>completemultiple</code></a></td>
<td>查看 <code>complete</code> 描述.</td>
</tr><tr id="event-canceledmultiple">
<td><a href="#event-canceledmultiple"><code>canceledmultiple</code></a></td>
<td>查看 <code>canceled</code> 描述.</td>
</tr><tr>
<td class="separator" colspan="2">
特殊事件:
</td>
</tr><tr id="event-totaluploadprogress">
<td><a href="#event-totaluploadprogress"><code>totaluploadprogress</code></a></td>
<td>
用 <code>uploadProgress</code> (0-100),
<code>totalBytes</code> 和 <code>totalBytesSent</code>的总数调用. 此事件可以用于显示所有文件的总体上传进度.
</td>
</tr><tr id="event-reset">
<td><a href="#event-reset"><code>reset</code></a></td>
<td>
当列表中的所有文件都被删除，并且 dropzone 被重置为初始状态时调用.
</td>
</tr><tr id="event-queuecomplete">
<td><a href="#event-queuecomplete"><code>queuecomplete</code></a></td>
<td>
当上传队列中的所有文件上传完成时调用.
</td>
</tr>
</tbody>
</table>
<h2 id="theming">主题</h2>
<p>如果你想完全自定义你的Dropzone主题, 大多数情况下你可以简单的 <a href="#layout">替换预览 HTML 模板</a>, 改写你的CSS是适应dropzone, 并且可以创建一些事件监听器.</p>
<p>用这种方法你可以做的更好。 我们创建了一个示例，在这个示例中我让dropzone看起来和感觉上完全和jQuery文件上传一样，而这仅仅是配置了几行代码. <a href="bootstrap.html" tppabs="http://www.dropzonejs.com/bootstrap.html">看看它!</a></p>
<p>你可以看到, 最大的修改是 <code>previewTemplate</code>. 然后，添加几个额外的事件侦听器，使它看起来和参考的完全一样.</p>
<p><em>你可以从新实现你的用户界面.</em></p>
<p>当Dropzone被创建时, Dropzone本身会在其上面设置大量的事件侦听器,
来处理你所有的 UI. 他们添加到Dropzone中: 创建一个新的HTML 元素,
添加<code><img></code> 元素当提供了图片信息(使用 <a href="#event-thumbnail"><code>thumbnail</code></a> 时间),
当 <a href="#event-uploadprogress"><code>uploadprogress</code></a> 事件被触发时,更新上传进度条[译者注：就是进度条会根据上次情况更新上传进度] . 当 <a href="#event-success"><code>success</code></a> 时间触发时,显示一个选择标记,等等...</p>
<p><em>所有的</em> 能看到的效果 都是由这些事件处理 完成的. 如果你把它们都重写成一个空函数, Dropzone
仍然会正常工作, 但是你将看不到任何拖着的效果.</p>
<blockquote>
<p>如果你喜欢Dropzone默认的效果, 但是仅仅想要在这些地方或者哪些地方添加一些效果, 你应该使用 <a href="#events">添加额外的时间侦听器</a> 来代替.</p>
</blockquote>
<p>重写默认的事件监听器，来创建你自己的、自定义的Dropzone,