js 文件上传

JS和CSS：

<script>

    $(function() {
        //选择文件
        $(".file").on("change", "input[type='file']", function() {
            var filePath = $(this).val();
            //设置上传文件类型
            if (filePath.indexOf("xls") != -1 || filePath.indexOf("xlsx") != -1) {
                //上传文件
                $.ajaxFileUpload({
                    url: 'uploadFileHandler.ashx',
                    secureuri: false,
                    fileElementId: 'btnfile',
                    dataType: 'json',
                    success: function(data, status) {
                        //获取上传文件路径
                        $("#txt_filePath").val(data.filenewname);
                        alert("文件上传成功！");
                    },
                    error: function(data, status, e) {
                        alert(e);
                    }
                });
            } else {
                alert("请选择正确的文件格式！");
                //清空上传路径
                $("#txt_filePath").val("");
                return false;
            }
        });
    })
</script>
<style>
.file{
   position: relative;
   background-color: #b32b1b;
   border: 1px solid #ddd;
   width: 68px;
   height: 25px;
   display: inline-block;
   text-decoration: none;
   text-indent: 0;
   line-height: 25px;
   font-size: 14px;
   color: #fff;
   margin: 0 auto;
   cursor: pointer;
   text-align: center;
   border: none;
   border-radius: 3px;         
}
.file input{
   position: absolute;
   top: 0;
   left: -2px;
   opacity: 0;
   width: 100px;
}

</style>

-----------------------------------------------------------------------------------

页面：

<form id="form1" runat="server">
 <div>  <input type="file" value="浏览" /> </div>
 <div>
    <span>选择文件：</span><input id="txt_filePath" type="text" readonly="readonly"/>
    <a class="file"><input id="btnfile" name="btnfile" type="file"/>浏览</a>
</div>
 </form>