项目在用多附件上传,在网友已实现的网易邮箱多附件上传的基础上,对文件类型进行判断,并自动移除危险文件。
<div id="tdtAttach">
<input id="my_file_element" type="file" name="fileList"/>
<br>
<!-- Multifiles upload secion -->
<div id="files_lists" style="font-size: 11px;padding-top: 10px; line-height: 140%"></div>
<script>
var multi_selector = new MultiSelector(document.getElementById('files_lists'));
multi_selector.addElement(document.getElementById('my_file_element'));
</script>
<!-- end of Multiflies upload -->
</div>
javaScript部分
var max =500;//最大文件数
var ki = 0; //标志
function checkFileCount(obj){
alert("bb");
if(obj.checked==true){
if(multi_selector.count > max){
alert("附件不能超过"+max+"个");
return false;
}else{
multi_selector.count++;
}
}else{
multi_selector.count--;
}
if(multi_selector.count>max)
multi_selector.current_element.disabled=true;
else
multi_selector.current_element.disabled=false;
}
function MultiSelector(list_target){
this.list_target=list_target;
this.count=<s:property value="#request.fList.size" default="0"/>;
this.id=0;
if(max){
this.max=max;
}else{
this.max=-1;
};
//页面初始化时添加一个input file。
this.addElement=function(element){
ki++;
if(element.tagName=='INPUT' && element.type=='file'){
element.name='fileList';
element.id ="my_file_element"+ki;
element.multi_selector=this;
element.style.padding="2px";
//定义前一个的input file 的onchange事件,onchange时,创建一个新的input file,使页面永远有一个input file可供使用。
element.οnchange=function(){
var new_element=document.createElement('input');
new_element.type='file';
new_element.id='file'+ki
this.parentNode.insertBefore(new_element, this);
this.multi_selector.addElement(new_element);
this.multi_selector.addListRow(this);
this.style.position='absolute';
this.style.left='-1000px';
};
if(this.max !=-1 && this.count >=this.max){element.disabled=true;};
this.count++;
this.current_element=element;
} else {
alert('Error: not a file input element');
};
};
//下方文件列表 后跟红色叉号可以删除文件
this.addListRow=function(element){
var new_row=document.createElement('div');
var new_row_button=document.createElement('a');
var myText=document.createTextNode('X');
new_row.id = "div"+ki;
new_row_button.href='#';
new_row_button.style.color='#FF0000';
new_row_button.style.fontFamily='Arial';
new_row_button.style.fontWeight='bold';
new_row_button.appendChild(myText);
new_row.element=element;
new_row_button.οnclick=function(){
this.parentNode.element.parentNode.removeChild(this.parentNode.element);
this.parentNode.parentNode.removeChild(this.parentNode);
this.parentNode.element.multi_selector.count--;
this.parentNode.element.multi_selector.current_element.disabled=false;
return false;
};
//获取当前选择文件,获取文件类型,若不是指定文件类型,移除文件列表中的文件,并且清空input file的值
upload=element.value;
var str = upload.substring(upload.lastIndexOf('.')+1,upload.length).toLowerCase();
if(!(str=='bmp' || str=='jpg' || str=='gif' || str=='png')){
alert("对不起,您选择上传的文件不是bmp,jpg,gif,png格式,请您重新选择的文件!");
document.getElementById("tdtAttach").removeChild(document.getElementById("my_file_element"+(ki-1)));
multi_selector.count--;
multi_selector.current_element.disabled=false;
return false;
}
new_row.innerHTML='<span class=uflist>'+element.value+'</span> ';
new_row.appendChild(new_row_button);
this.list_target.appendChild(new_row);
};//end of addListRow
};