【dropzone.js】仕組み＋カスタマイズ模索

こんがらがってきたのでscript部分からどんな処理をしていっているのか、見たい。

ドロップゾーンは赤字の部分でid,class名を書く

<script type="text/javascript">
$(function(){
//#dropzoneとに、ドラッグアンドドロップされたときの挙動
 $('#Dropzone').dropzone({
//下記urlで画像を指定のディレクトリにmove_uploaded_file
//（ファイル名で識別して保存先変えたい場合は下のurl）
 url: './image_upload.php',
 addRemoveLinks:true,
//ドラッグアンドドロップゾーンに画像を表示（画像の大きさここ）
 thumbnailWidth:100,
 thumbnailHeight:100,
 uploadprogress:function(_file, _progress, _size){
 _file.previewElement.querySelector("[data-dz-uploadprogress]").style.width = "" + _progress + "%";
 },
 success:function(_file, _return, _xml){
 _file.previewElement.classList.add("dz-success");
//下のURLから、さきほどアップロードしたファイルを取り出し、JSONで出力
 $.getJSON('./ajax_get_uploaded_files.php',
 function(data){
 $('#FileContainer').children().remove();
 $('#UploadForm').children().remove();
 //データそれぞれに行う処理をここに（postしたい場合ここに書く）
 $.each(data, function(key, val) {
 $('#FileContainer').append('<div class="item">' + val + '</div>');
 $('#UploadForm').append('<div class="item_wrapper">' + val + 
//ここのへんでinputなど（div等で体裁整えれます）
 '<input type="hidden" name="item_frag" value=' + key + ' />'+
 '</div><!-- .item_wrapper -->'
 );
 });
 $('#UploadForm').append('<input type="submit" value="登録" />');
 }
 );
 
 },
 error:function(_file, _error_msg){
 var ref;
 (ref = _file.previewElement) != null ? ref.parentNode.removeChild(_file.previewElement) : void 0;
 },
 removedfile:function(_file){
 var ref;
 (ref = _file.previewElement) != null ? ref.parentNode.removeChild(_file.previewElement) : void 0;
 },
 dictRemoveFile:'削除',
 dictCancelUpload:'キャンセル'
 });
});
</script>