zoukankan      html  css  js  c++  java
  • 【 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;
                 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;
                     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>
  • 相关阅读:
    ListNode Java创建链表
    Remove Nth Node From End of List LeetCode Java
    Rotate List LeetCode Java
    LeetCode刷题感想
    Swap Nodes in Pairs LeetCode Java
    Reverse Nodes in k-Group LeetCode Java
    334. Increasing Triplet Subsequence
    300. Longest Increasing Subsequence
    130. Surrounded Regions
    200. Number of Islands
  • 原文地址:https://www.cnblogs.com/kikyoqiang/p/12373666.html
Copyright © 2011-2022 走看看