form.fileSelect()の意味がわかりません
下記のコードで、 form.fileSelect()はどんな、意味かをどなた様かご教示頂けますでしょうか。
このような関数ないかをしらべたが特になく、自己定義関数にしても、functionがなく、他で使用されている様子もありません。小括弧に中括弧を挟むのも初めて見ました。
そもそも、関数でないとしたら、なにかもわからずに、記法自体調べても検討がつかなかったため、お願い申し上げます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form action="Z_confirm.php" method="post" enctype="multipart/form-data">
<label for="files" class="fileupImg"><i class="plus icon"></i>ファイルを選択
<input type="file" id="files" style="display: none" value="2097152" name="file" multiple />
</label>
</div>
<figure>
<output id="list"></output>
</figure>
<div class="fileInfo"></div>
<button type="button" name="button" id="delete" style="height:20px;">X</button>
<br>
<br>
<input class="submit step-button" type="submit" value="登録する">
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
jQuery(function()
{
// セットアップ
var obj = form.fileSelect({
input : '#files',
list : '#list',
deleteBtn : '#delete',
thumbnail : { width : 150, class : 'thumbnail' },
//複数のファイルを許可するか?
multipleFile : true
});
// ファイルをセットした時に発火するイベント 引数に選択したファイルが返ってくる
obj.OnSelectFile(function(file)
{
console.log(file);
//ファイルが存在するか?
console.log(obj.hasFile());
//すべてのファイルを取得 配列
console.log(obj.getFiles());
});
//すべてのファイルをリセット
obj.reset();
});
</script>
<script>
var form;
(function(g,$)
{
g.fileSelect = function(setting)
{
var el = {}, data = {};
var init = function()
{
el.input = $(setting.input);
el.list = $(setting.list);
el.deleteBtn = $(setting.deleteBtn);
data.files = [];
setUp();
};
var setUp = function()
{
el.input.on('change', handleFileSelect);
el.deleteBtn.on('click', deleteFile);
};
var hasFile = function() { return data.files.length > 0; }
var getFiles = function() { return data.files; };
var handleFileSelect = function(e)
{
var file = e.target.files[0],
reader = new FileReader();
if(file.type.indexOf("image") < 0) return false;
reader.onload = (function(file)
{
return function(e)
{
if(!setting.multipleFile) reset();
file.src = e.target.result;
data.files.push(file);
var spn = $('<span>');
spn.append($('<img>').attr({
src: file.src,
width: setting.thumbnail.width,
class: setting.thumbnail.class,
title: file.name
}));
el.list.append(spn);
el.input.trigger( "OnSelectFile", file );
reader.va
};
})(file);
reader.readAsDataURL(file);
};
var deleteVal = function()
{
el.input.prop('value','');
};
var deleteFile = function()
{
el.list.html('');
data.files = [];
deleteVal();
};
var OnSelectFile = function(fn)
{
el.input.on('OnSelectFile', function(e, f){
fn(f);
});
}
var reset = function(){
data.files = [];
el.list.html('');
deleteVal();
};
init();
return {
OnSelectFile : OnSelectFile,
hasFile : hasFile,
getFiles : getFiles,
reset : reset
}
};
}(form || (form = {}), jQuery));
</scrip
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form action="Z_confirm.php" method="post" enctype="multipart/form-data">
<label for="files" class="fileupImg"><i class="plus icon"></i>ファイルを選択
<input type="file" id="files" style="display: none" value="2097152" name="file" multiple />
</label>
</div>
<figure>
<output id="list"></output>
</figure>
<div class="fileInfo"></div>
<button type="button" name="button" id="delete" style="height:20px;">X</button>
<br>
<br>
<input class="submit step-button" type="submit" value="登録する">
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
jQuery(function()
{
// セットアップ
var obj = form.fileSelect({
input : '#files',
list : '#list',
deleteBtn : '#delete',
thumbnail : { width : 150, class : 'thumbnail' },
//複数のファイルを許可するか?
multipleFile : true
});
// ファイルをセットした時に発火するイベント 引数に選択したファイルが返ってくる
obj.OnSelectFile(function(file)
{
console.log(file);
//ファイルが存在するか?
console.log(obj.hasFile());
//すべてのファイルを取得 配列
console.log(obj.getFiles());
});
//すべてのファイルをリセット
obj.reset();
});
</script>
<script>
var form;
(function(g,$)
{
g.fileSelect = function(setting)
{
var el = {}, data = {};
var init = function()
{
el.input = $(setting.input);
el.list = $(setting.list);
el.deleteBtn = $(setting.deleteBtn);
data.files = [];
setUp();
};
var setUp = function()
{
el.input.on('change', handleFileSelect);
el.deleteBtn.on('click', deleteFile);
};
var hasFile = function() { return data.files.length > 0; }
var getFiles = function() { return data.files; };
var handleFileSelect = function(e)
{
var file = e.target.files[0],
reader = new FileReader();
if(file.type.indexOf("image") < 0) return false;
reader.onload = (function(file)
{
return function(e)
{
if(!setting.multipleFile) reset();
file.src = e.target.result;
data.files.push(file);
var spn = $('<span>');
spn.append($('<img>').attr({
src: file.src,
width: setting.thumbnail.width,
class: setting.thumbnail.class,
title: file.name
}));
el.list.append(spn);
el.input.trigger( "OnSelectFile", file );
reader.va
};
})(file);
reader.readAsDataURL(file);
};
var deleteVal = function()
{
el.input.prop('value','');
};
var deleteFile = function()
{
el.list.html('');
data.files = [];
deleteVal();
};
var OnSelectFile = function(fn)
{
el.input.on('OnSelectFile', function(e, f){
fn(f);
});
}
var reset = function(){
data.files = [];
el.list.html('');
deleteVal();
};
init();
return {
OnSelectFile : OnSelectFile,
hasFile : hasFile,
getFiles : getFiles,
reset : reset
}
};
}(form || (form = {}), jQuery));
</script>
</body>
</html>