js 模拟选择文件效果

 

代码来自网络

< html >
< head >
</ head >
< style >
    body
    {}{
        padding-top: 50px;
        padding-left: 100px;
        padding-right: 150px;
    }
    .fileDiv
    {}{
        float: left;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 12px;
        border: 1px solid #cccccc;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .seled
    {}{
        border: 1px solid #ff0000;
        background-color: #D6DFF7;
    }
</ style >

< script  type ="text/javascript" >
    /**//*--------------------------------- 以下4个方法 摘自网络 ----------------------------------------*/
    Array.prototype.remove = function(item) {
        for (var i = 0; i < this.length; i++) {
            if (item == this[i])
                break;
        }
        if (i == this.length)
            return;
        for (var j = i; j < this.length - 1; j++) {
            this[j] = this[j + 1];
        }
        this.length--;
    }

    String.prototype.replaceAll = function(AFindText, ARepText) { raRegExp = new RegExp(AFindText, "g"); return this.replace(raRegExp, ARepText); }

    function getAllChildren(e) {
        return e.all ? e.all : e.getElementsByTagName('*');
    }

    document.getElementsBySelector = function(selector) {

        if (!document.getElementsByTagName) {
            return new Array();
        }

        var tokens = selector.split(' ');
        var currentContext = new Array(document);
        for (var i = 0; i < tokens.length; i++) {
            token = tokens[i].replace(/^\s+/, '').replace(/\s+$/, ''); ;
            if (token.indexOf('#') > -1) {

                var bits = token.split('#');
                var tagName = bits[0];
                var id = bits[1];
                var element = document.getElementById(id);
                if (tagName && element.nodeName.toLowerCase() != tagName) {

                    return new Array();
                }
                currentContext = new Array(element);
                continue;
            }
            if (token.indexOf('.') > -1) {

                var bits = token.split('.');
                var tagName = bits[0];
                var className = bits[1];
                if (!tagName) {
                    tagName = '*';
                }

                var found = new Array;
                var foundCount = 0;
                for (var h = 0; h < currentContext.length; h++) {
                    var elements;
                    if (tagName == '*') {
                        elements = getAllChildren(currentContext[h]);
                    } else {
                        elements = currentContext[h].getElementsByTagName(tagName);
                    }
                    for (var j = 0; j < elements.length; j++) {
                        found[foundCount++] = elements[j];
                    }
                }
                currentContext = new Array;
                var currentContextIndex = 0;
                for (var k = 0; k < found.length; k++) {
                    if (found[k].className && found[k].className.match(new RegExp('\\b' + className + '\\b'))) {
                        currentContext[currentContextIndex++] = found[k];
                    }
                }
                continue;
            }
            if (token.match(/^(\w*)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/)) {
                var tagName = RegExp.$1;
                var attrName = RegExp.$2;
                var attrOperator = RegExp.$3;
                var attrValue = RegExp.$4;
                if (!tagName) {
                    tagName = '*';
                }
                var found = new Array;
                var foundCount = 0;
                for (var h = 0; h < currentContext.length; h++) {
                    var elements;
                    if (tagName == '*') {
                        elements = getAllChildren(currentContext[h]);
                    } else {
                        elements = currentContext[h].getElementsByTagName(tagName);
                    }
                    for (var j = 0; j < elements.length; j++) {
                        found[foundCount++] = elements[j];
                    }
                }
                currentContext = new Array;
                var currentContextIndex = 0;
                var checkFunction;
                switch (attrOperator) {
                    case '=':
                        checkFunction = function(e) { return (e.getAttribute(attrName) == attrValue); };
                        break;
                    case '~':
                        checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('\\b' + attrValue + '\\b'))); };
                        break;
                    case '|':
                        checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('^' + attrValue + '-?'))); };
                        break;
                    case '^':
                        checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) == 0); };
                        break;
                    case '$':
                        checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue.length); };
                        break;
                    case '*':
                        checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) > -1); };
                        break;
                    default:
                        checkFunction = function(e) { return e.getAttribute(attrName); };
                }
                currentContext = new Array;
                var currentContextIndex = 0;
                for (var k = 0; k < found.length; k++) {
                    if (checkFunction(found[k])) {
                        currentContext[currentContextIndex++] = found[k];
                    }
                }
                continue;
            }
            tagName = token;
            var found = new Array;
            var foundCount = 0;
            for (var h = 0; h < currentContext.length; h++) {
                var elements = currentContext[h].getElementsByTagName(tagName);
                for (var j = 0; j < elements.length; j++) {
                    found[foundCount++] = elements[j];
                }
            }
            currentContext = found;
        }
        return currentContext;
    }


    /**//*--------------------------------------------------------------------------------------------------------*/
    /**//** 
    * author: 王永山 
    * version: 1.1 beta 
    * date: 2008-09-09 
    * email: [email]wangys0927@163.com[/email] 
    * 
    * update: 
    * 1. 针对前2个beta版，该版本修复了前两个版本出现的 bug ， 
    * 2. 进行了代码的简单封装（由于本人初学js，对js掌握的很浅，因此面向对象的理解很差，封装的不好）； 
    * 3. 增加了对 Ctrl 和 Shift 键的支持(目前shift键的功能和ctrl键的功能一样，还不能达到仿windows的选区Shift键的功能)。 
    * 4. 增加了获取“被选区选中元素”的方法，可以点击按钮“getRegions”看效果。 
    */


    function addEvent(eventType, eventFunc, eventObj) {
        eventObj = eventObj || document;
        if (window.attachEvent) eventObj.attachEvent("on" + eventType, eventFunc);
        if (window.addEventListener) eventObj.addEventListener(eventType, eventFunc, false);
    }
    function clearEventBubble(evt) {
        evt = evt || window.event;
        if (evt.stopPropagation) evt.stopPropagation(); else evt.cancelBubble = true;
        if (evt.preventDefault) evt.preventDefault(); else evt.returnValue = false;
    }

    function posXY(event) {
        event = event || window.event;
        var posX = event.pageX || (event.clientX +
            (document.documentElement.scrollLeft || document.body.scrollLeft));
        var posY = event.pageY || (event.clientY +
            (document.documentElement.scrollTop || document.body.scrollTop));
        return { x: posX, y: posY };
    }
    //----------- 区域选择关键方法 ----------------------- 
    var _selectedRegions = [];
    function RegionSelect(selRegionProp) {
        this.regions = [];
        var _regions = document.getElementsBySelector(selRegionProp["region"]);
        if (_regions && _regions.length > 0) {
            var _self = this;
            for (var i = 0; i < _regions.length; i++) {
                _regions[i].onmousedown = function() {
                    var evt = window.event || arguments[0];
                    if (!evt.shiftKey && !evt.ctrlKey) {
                        // 清空所有select样式 
                        _self.clearSelections(_regions);
                        this.className += " " + _self.selectedClass;
                        // 清空selected数组，并加入当前select中的元素 
                        _selectedRegions = [];
                        _selectedRegions.push(this);
                    } else {
                        if (this.className.indexOf(_self.selectedClass) == -1) {
                            this.className += " " + _self.selectedClass;
                            _selectedRegions.push(this);
                        } else {
                            this.className = this.className.replaceAll(_self.selectedClass, "");
                            _selectedRegions.remove(this);
                        }
                    }
                    clearEventBubble(evt);
                }
                this.regions.push(_regions[i]);
            }
        }
        this.selectedClass = selRegionProp["selectedClass"];
        this.selectedRegion = [];
        this.selectDiv = null;
        this.startX = null;
        this.startY = null;
    }

    RegionSelect.prototype.select = function() {
        var _self = this;
        addEvent("mousedown", function() {
            var evt = window.event || arguments[0];
            _self.onBeforeSelect(evt);
            clearEventBubble(evt);
        }, document);

        addEvent("mousemove", function() {
            var evt = window.event || arguments[0];
            _self.onSelect(evt);
            clearEventBubble(evt);
        }, document);

        addEvent("mouseup", function() {
            _self.onEnd();
        }, document);
    }

    RegionSelect.prototype.onBeforeSelect = function(evt) {
        // 创建模拟 选择框 
        if (!document.getElementById("selContainer")) {
            this.selectDiv = document.createElement("div");
            this.selectDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";
            this.selectDiv.id = "selContainer";
            document.body.appendChild(this.selectDiv);
        } else {
            this.selectDiv = document.getElementById("selContainer");
        }

        this.startX = posXY(evt).x;
        this.startY = posXY(evt).y;
        this.isSelect = true;

    }

    RegionSelect.prototype.onSelect = function(evt) {
        var _self = this;
        if (_self.isSelect) {
            if (_self.selectDiv.style.display == "none") _self.selectDiv.style.display = "";

            var posX = posXY(evt).x;
            var poxY = posXY(evt).y;

            _self.selectDiv.style.left = Math.min(posX, this.startX);
            _self.selectDiv.style.top = Math.min(poxY, this.startY);
            _self.selectDiv.style.width = Math.abs(posX - this.startX);
            _self.selectDiv.style.height = Math.abs(poxY - this.startY);

            var regionList = _self.regions;
            for (var i = 0; i < regionList.length; i++) {
                var r = regionList[i], sr = _self.innerRegion(_self.selectDiv, r);
                if (sr && r.className.indexOf(_self.selectedClass) == -1) {
                    r.className = r.className + " " + _self.selectedClass;
                    _selectedRegions.push(r);
                } else if (!sr && r.className.indexOf(_self.selectedClass) != -1) {
                    r.className = r.className.replaceAll(_self.selectedClass, "");
                    _selectedRegions.remove(r);
                }

            }
        }
    }

    RegionSelect.prototype.onEnd = function() {
        if (this.selectDiv) {
            this.selectDiv.style.display = "none";
        }
        this.isSelect = false;
        //_selectedRegions = this.selectedRegion; 
    }

    // 判断一个区域是否在选择区内 
    RegionSelect.prototype.innerRegion = function(selDiv, region) {
        var s_top = parseInt(selDiv.style.top);
        var s_left = parseInt(selDiv.style.left);
        var s_right = s_left + parseInt(selDiv.offsetWidth);
        var s_bottom = s_top + parseInt(selDiv.offsetHeight);

        var r_top = parseInt(region.offsetTop);
        var r_left = parseInt(region.offsetLeft);
        var r_right = r_left + parseInt(region.offsetWidth);
        var r_bottom = r_top + parseInt(region.offsetHeight);

        var t = Math.max(s_top, r_top);
        var r = Math.min(s_right, r_right);
        var b = Math.min(s_bottom, r_bottom);
        var l = Math.max(s_left, r_left);

        if (b > t + 5 && r > l + 5) {
            return region;
        } else {
            return null;
        }

    }

    RegionSelect.prototype.clearSelections = function(regions) {
        for (var i = 0; i < regions.length; i++) {
            regions[i].className = regions[i].className.replaceAll(this.selectedClass, "");
        }
    }

    function getSelectedRegions() {
        return _selectedRegions;
    }
    /**//*-------------------------------------- 区域选择方法结束 --------------------------------------------*/

    function showSelDiv() {
        var selInfo = "";
        var arr = getSelectedRegions();
        for (var i = 0; i < arr.length; i++) {
            selInfo += arr[i].innerHTML + "\n";
        }

        alert("共选择 " + arr.length + " 个文件，分别是：\n" + selInfo);

    } 
     
</ script >

< body >
     < button  onclick ="showSelDiv();" >
        getRegions </ button >
     < div  class ="fileDiv" >
        file1 </ div >
     < div  class ="fileDiv" >
        file2 </ div >
     < div  class ="fileDiv" >
        file3 </ div >
     < div  class ="fileDiv" >
        file4 </ div >
     < div  class ="fileDiv" >
        file5 </ div >
     < div  class ="fileDiv" >
        file6 </ div >
     < div  class ="fileDiv" >
        file7 </ div >
     < div  class ="fileDiv" >
        file8 </ div >
     < div  class ="fileDiv" >
        file9 </ div >
     < div  class ="fileDiv" >
        file10 </ div >
     < div  class ="fileDiv" >
        file11 </ div >
     < div  class ="fileDiv" >
        file12 </ div >
     < div  class ="fileDiv" >
        file13 </ div >
     < div  class ="fileDiv" >
        file14 </ div >
     < div  class ="fileDiv" >
        file15 </ div >
     < div  class ="fileDiv" >
        file16 </ div >
     < div  class ="fileDiv" >
        file17 </ div >
     < div  class ="fileDiv" >
        file18 </ div >
     < div  class ="fileDiv" >
        file19 </ div >
     < div  class ="fileDiv" >
        file20 </ div >
     < div  class ="fileDiv" >
        file21 </ div >
     < div  class ="fileDiv" >
        file22 </ div >
     < div  class ="fileDiv" >
        file23 </ div >
     < div  class ="fileDiv" >
        file24 </ div >
     < div  class ="fileDiv" >
        file25 </ div >
     < div  class ="fileDiv" >
        file26 </ div >
     < div  class ="fileDiv" >
        file27 </ div >
     < div  class ="fileDiv" >
        file28 </ div >
     < div  class ="fileDiv" >
        file29 </ div >
     < div  class ="fileDiv" >
        file30 </ div >
     < div  class ="fileDiv" >
        file31 </ div >
     < div  class ="fileDiv" >
        file32 </ div >
     < div  class ="fileDiv" >
        file33 </ div >
     < div  class ="fileDiv" >
        file34 </ div >
     < div  class ="fileDiv" >
        file35 </ div >
     < div  class ="fileDiv" >
        file36 </ div >
     < div  class ="fileDiv" >
        file37 </ div >
     < div  class ="fileDiv" >
        file38 </ div >
     < div  class ="fileDiv" >
        file39 </ div >
     < div  class ="fileDiv" >
        file40 </ div >
     < div  class ="fileDiv" >
        file41 </ div >
     < div  class ="fileDiv" >
        file42 </ div >
     < div  class ="fileDiv" >
        file43 </ div >
     < div  class ="fileDiv" >
        file44 </ div >
     < div  class ="fileDiv" >
        file45 </ div >
     < div  class ="fileDiv" >
        file46 </ div >
     < div  class ="fileDiv" >
        file47 </ div >
     < div  class ="fileDiv" >
        file48 </ div >
     < div  class ="fileDiv" >
        file49 </ div >
     < div  class ="fileDiv" >
        file50 </ div >
     < div  class ="fileDiv" >
        file51 </ div >
     < div  class ="fileDiv" >
        file52 </ div >
     < div  class ="fileDiv" >
        file53 </ div >
     < div  class ="fileDiv" >
        file54 </ div >
     < div  class ="fileDiv" >
        file55 </ div >
     < div  class ="fileDiv" >
        file56 </ div >
     < div  class ="fileDiv" >
        file57 </ div >
     < div  class ="fileDiv" >
        file58 </ div >
     < div  class ="fileDiv" >
        file59 </ div >
     < div  class ="fileDiv" >
        file60 </ div >
     < div  style ="float: left; width: 100%;" >
         < button  onclick ="showSelDiv();" >
            getRegions </ button ></ div >
</ body >

< script >
    new RegionSelect({
        region: 'div.fileDiv',
        selectedClass: 'seled'
    }).select(); 
</ script >

</ html >