文件上传按钮

 

　　　　　　　　　　

<style>
.fileup {
    height: 32px;
    line-height: 32px;
    overflow: hidden;
}

.fileup .filepath {
    height: 32px;
    overflow:hidden;
    position: relative;
    margin-right: 5px;
    height: 32px;
    width: 58%;
    /* max-width:120px; */
    float: left;
    border: 1px solid #ccc;
    padding: auto 10px;
    box-sizing: box-content;
}

.fileup .filepath label {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border: none;
    height: 32px;
    width: 100%;
    line-height: 32px;
    text-align: center;
    font-weight: normal;
}

.fileup .filepath #excelFrom input {
    height: 32px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -999;
}
</style>


<div calss="col-sm-10 pad0" style="padding-left: 20px;height:32px;">
                <div class=" fileup col-sm-3 col-xs-4 pad0">
                    <p class="pad0" style="width: 20.7%; float: left">文件上传：</p>
                    <div class="pad0" style="width: 79%:float:left">
                        <div class="filepath">
                            <label id="filePathSee" for="file"
                                style="background: #fff; position: relative; z-index: 99">未上传文件</label>
                            <form id="excelFrom" enctype="multipart/form-data"
                                method="post">
                                <input type="file" id="file" name="file"
                                    onchange="getvl(this)" />
                            </form>
                        </div>
                        <a href="javascript:uploadExcle();" class="btn btn-primary"
                            style="width: 25%; max-width: 50px; float: right;">上传</a>
                    </div>
                </div>
            </div>


<script type="text/javascript">
        //FX获取文件路径方法
        function readFileFirefox(fileBrowser) {
            var fileName = fileBrowser.value; //这一步就能得到客户端完整路径。下面的是否判断的太复杂，还有下面得到ie的也很复杂。
            var file = Components.classes["@mozilla.org/file/local;1"]
                .createInstance(Components.interfaces.nsILocalFile);
            try {
                // Back slashes for windows
                file.initWithPath(fileName.replace(/\//g, "\\\\"));
            } catch(e) {
                if(e.result != Components.results.NS_ERROR_FILE_UNRECOGNIZED_PATH) throw e;
                alert("File '" + fileName + "' cannot be loaded: relative paths are not allowed. Please provide an absolute path to this file.");
                return;
            }
            if(file.exists() == false) {
                alert("File '" + fileName + "' not found.");
                return;
            }
            return file.path;
        }

        //根据不同浏览器获取路径
        function getvl(obj) {
            //判断浏览器
            var Sys = {};
            var ua = navigator.userAgent.toLowerCase();
            var s;
            (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1]:
                (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
                (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
                (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
                (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
            var file_url = "";
            if(Sys.ie <= "6.0") {
                //ie5.5,ie6.0
                file_url = obj.value;
            } else if(Sys.ie >= "7.0") {
                //ie7,ie8
                obj.select();
                file_url = document.selection.createRange().text;
            } else if(Sys.firefox) {
                //fx
                //file_url = document.getElementById("file").files[0].getAsDataURL();//获取的路径为FF识别的加密字符串
                file_url = readFileFirefox(obj);
            } else if(Sys.chrome) {
                file_url = obj.value;
            }
            //alert(file_url);
            document.getElementById("filePathSee").innerHTML = file_url;
            $('#filePathSee').attr('title',file_url)
        }
</script>