Page 70 - JavaScript修炼之道

任务26 使用动态多文件上传 59

表单的HTML代码

form/uploads/index.html

<form method="post" action="server.php" enctype="multipart/form-data">
<ul id="uploads"></ul>
<p><input type="file" name="files[]" id="filSelector" /></p>
<p><input type="submit" value="Send these files" /></p>
</form>

将文件上传项加入队列

form/uploads/uploads.js

function queueFile() {
var fileName = $F(this), clone = this.cloneNode(true);
var item = new Element('li', { 'class': getFileClass(fileName) });
$(clone).observe('change', queueFile).setValue('');
this.parentNode.appendChild(clone);
item.appendChild(this);
item.appendChild(document.createTextNode(fileName));
item.insert('<button><img src="remove.png" alt="Remove" /></button>');
$('uploads').appendChild(item);
}

document.observe('dom:loaded', function() {
$('filSelector').observe('change', queueFile);
$('uploads').observe('click', handleQueueRemoval);
});

做得更气派：根据文件扩展名设置样式，移除被单击的队列项

form/uploads/uploads.js

var ICONS = $H({ word: $w('doc docx'), image: $w('jpg jpeg gif png') });

function getFileClass(fileName) {
var ext = (fileName.match(/\.(.+?)$/) || [])[1].toString().toLowerCase();
var icon = ICONS.detect(function(pair) { return pair[1].include(ext); });
return (icon || [])[0];
}

function handleQueueRemoval(e) {
var trigger = e.findElement('button');
trigger && trigger.up('li').remove();
}