JS简单实用小功能（三）

1 <h2>限制复选框最多选择几项</h2>
2 <input type="checkbox" name=‘forbidcheckSelects‘>1<br />
3 <input type="checkbox" name=‘forbidcheckSelects‘>2<br />
4 <input type="checkbox" name=‘forbidcheckSelects‘>3<br />
5 <input type="checkbox" name=‘forbidcheckSelects‘>4<br />
6 <p>最多选择3项</p>

 1   window.onload = function(){
 2         var _forbidcheckSelects = document.getElementsByName("forbidcheckSelects"),
 3         //限制复选框最多选择3项
 4                 banNums = 3;
 5         for(var i in _forbidcheckSelects){
 6             _forbidcheckSelects[i].onclick = function(){
 7                 var __forbidcheckSelects = document.getElementsByName("forbidcheckSelects"),
 8                         selectNum = 0;
 9                 for(var i in __forbidcheckSelects){
10                     if(i == "length") break;
11                     if(__forbidcheckSelects[i].checked){
12                         selectNum++;
13                     }
14                 }
15                 //如果选中的复选项，超过限制最大数，将当前的选中选项设置为没选中false
16                 if(selectNum > banNums) {
17                     this.checked = false;
18                 }
19 
20             }
21 
22         }
23     };

1 <h2>Checkbox全选、取消全选、反选</h2>
2 <p><input type="button" id=‘allSelect‘ value="全选"><input type="button" id=‘canelallSelect‘ value="取消全选"><input type="button" id=‘_select‘ value=‘反选‘> </p>
3 <input type="checkbox" name=‘actionSelects‘>1<br />
4 <input type="checkbox" name=‘actionSelects‘>2<br />
5 <input type="checkbox" name=‘actionSelects‘>3<br />
6 <input type="checkbox" name=‘actionSelects‘>4<br />

 1  window.onload = function(){
 2         var targets = document.getElementsByName("actionSelects"),
 3                 targetsLen = targets.length,
 4                 i = 0;
 5 
 6         document.getElementById("allSelect").onclick = function(){
 7             for(i = 0 ;i < targetsLen ; i ++){
 8                 targets[i].checked = true;
 9             }
10         }
11 
12         document.getElementById("canelallSelect").onclick = function(){
13             for(i = 0 ;i < targetsLen ; i ++){
14                 targets[i].checked = false;
15             }
16         }
17 
18         document.getElementById("_select").onclick = function(){
19             for(i = 0 ; i < targetsLen ; i ++){
20                 targets[i].checked = !targets[i].checked;
21             }
22 
23         }
24     };

1 <h2>JavaScript对上传文件相关操作</h2>
2 <form id=‘fileUpload‘ enctype="multipart/form-data">
3     <p><input type="file" name=‘file1‘ id=‘filedemo1‘> </p>
4     <input type="button" id=‘addFileUpload‘ value="添加">
5     <input type="button" id=‘clearFileUpload‘ value="清空">
6     <input type="button" id=‘fileUploadSub‘ value="上传">
7 </form>

 1  window.onload = function(){
 2         uploadCount = 1;//增加的文件“input”标示符
 3 
 4         isIE = function(){//是否是ie
 5             return document.all ? true : false;
 6         }
 7 
 8         getFileSize = function(_f){//获取文件大小
 9             var _fileSize = 0;
10             if (this.isIE() && !_f.files) {
11                 var filePath = _f.value;
12                 var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
13 
14                 if(!fileSystem.FileExists(filePath)){
15                     return 0;
16                 }
17                 var file = fileSystem.GetFile (filePath);
18                 _fileSize = file.Size;
19             } else {
20                 _fileSize = (_f.files[0] && _f.files[0].size) || 0;
21             }
22             return _fileSize;
23         }
24 
25         fileType = function(_eForm, types){//限制上传文件的格式
26             var _elements = _eForm.elements,
27                     _elementsLen = _elements.length
28             _ei = null,
29                     _v = "",
30                     _contentType = "",
31                     i = 0;
32             for (; i < _elementsLen ; i++){
33                 _ei = _elements[i];
34                 if(_ei.type == "file"){
35                     //var _i = _ei.value.lastIndexOf("\\");
36                     _v = _ei.value,
37                             _contentType = _v && _v.match(/^(.*)(\.)(.{1,8})$/)[3];
38 
39                     if(!_v || types.search(_contentType) != -1){//如果文件上传为空或者类型为限制类型则返回false
40                         return false;
41                     }
42                 }
43             }
44             return true;
45         }
46 
47         clearFile = function(_eForm){//清空input为file的ui
48             var _elements = _eForm.elements,
49                     _elementsLen = _elements.length,
50                     _ei = null,
51                     i = 0;
52             for (; i < _elementsLen ; i++){
53                 _ei = _elements[i];
54                 (_ei.type == "file") && ((isIE() && (_ei.outerHTML = _ei.outerHTML)) || (_ei.value = ""));//如果为IE，利用其特性清空file文本数据，否则直接将value设置为空值
55             }
56         }
57 
58         fileUpload = function(){//上传文件的相关业务
59             var _fileUpload = document.getElementById("fileUpload"),
60                     _addFileUpload = document.getElementById("addFileUpload"),
61                     _clearFileUpload = document.getElementById("clearFileUpload"),
62                     _filedemo1 = document.getElementById("filedemo1"),
63                     _fileUploadSub = document.getElementById("fileUploadSub");
64             _fileUploadSub.onclick =function(){
65                 alert("测试获取文件大小：" + getFileSize(_filedemo1));//获取上传文件的大小
66                 if(!fileType(_fileUpload, "text")){//限制上传文件的格式 ---参数（上传文件的表单对象， 被限制的格式）
67                     return;
68                 }
69             }
70 
71             _clearFileUpload.onclick =function(){//清除上传文件的内容
72                 clearFile(_fileUpload);
73             }
74 
75             _addFileUpload.onclick =function(){//动态多文件上传，添加上传文件元素
76                 uploadCount++;
77                 var  _input=document.createElement("input"),
78                         _pE=document.createElement("p");
79                 _input.name="filedemo"+uploadCount;
80                 _input.id="filedemo"+uploadCount;
81                 _input.type="file";
82                 _pE.appendChild(_input);
83                 _fileUpload.insertBefore(_pE,document.getElementById("addFileUpload"));
84             }
85         }
86         fileUpload();
87     };