【 js 上传文件】

上传文件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    
    <!--引用相关的js文件  注意先引用jquery-->
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/ajaxfileupload.js"></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: 10px;
            }
    </style>
    <script>
        $(function () {
            //选择文件
            $(".file").on("change", "input[type='file']", function () {
                var filePath = $(this).val();
                //设置上传文件类型
                ////if (filePath.indexOf("xls") != -1 || filePath.indexOf("xlsx") != -1) {
         
                    //上传文件
                    $.ajaxFileUpload({
                        url: 'FileHandler.ashx',//处理程序路径
                        secureuri: false,
                        fileElementId: 'btnfile',
                        dataType: 'json',
                        success: function (data, status) {
                            //获取上传文件路径
                            //$("#txt_filePath").val(data.filenewname);
                            alert("文件上传成功！");
                        },
                        error: function (data, status, e) {
                            //alert(e);
                            alert("not");
                        }
                    });

                    
                ////} else {
                ////    alert("请选择正确的文件格式！");
                ////    //清空上传路径
                ////    $("#txt_filePath").val("");
                ////    return false;
                ////}
            });
        })
    </script>
</head>
<body style="font-size:25px;">

    <!--ajax配合ashx实现文件上传-->

    <div>
        <span>选择文件：</span><input id="txt_filePath" type="text" readonly="readonly" />
        <a class="file"><input id="btnfile" name="btnfile" type="file" />浏览</a>
    </div>
</body>
</html>

 

posted @ 2020-02-27 18:49  一只桔子2233  阅读(119)  评论(0)  编辑  收藏  举报