利用FileReader.readAsText()读取文件内容并保存到服务器

来源：互联网发布：linux命令行写c 编辑：程序博客网时间：2024/05/16 09:44
完整文件内容如下
<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>发布</title>    <style type="text/css">    #demoForm {        border: 1px dashed #f2f2f2;        margin-top:10px;        margin-bottom:10px;        padding-top:10px;        padding-bottom:10px;        text-align:center;    }    #demoForm .progressbar {         width:100%;         display:none;    }     #demoForm .progressbar #loading {         width:400px;         height:20px;         background:/* url(20100311165403426.png) no-repeat */#f6f6f6;         position: relative;        margin: 0 auto;    }     #demoForm .progressbar #loading .progress {         width:0px;         height:20px;         line-height:20px;         background:#45B6F7/*url(20100311165403115.png) no-repeat*/;     }     #demoForm .progressbar #loading .percent {        width:100%;        height:20px;         line-height:20px;        position: absolute;        left: 0;        top: 0;        color:#fff;         z-index: 10;        text-align:center;         font-family:Tahoma;         font-size:12px;     }    #demoForm .progressbar #message {         width:100%;         height:25px;         line-height:25px;        font-family:Tahoma;         font-size:12px;         /* background-color:#d8e7f0;  */        /* border:1px solid #187CBE;  */        text-align:center;         margin-top:10px;         /* display:none;  */    }    #demoForm .execute {        width:100%;         text-align:center;        display:none;    }    #demoForm .execute #filepath {         width:100%;         height:25px;         line-height:25px;        font-family:Tahoma;         font-size:12px;         /* background-color:#d8e7f0;  */        /* border:1px solid #187CBE;  */        text-align:center;         margin-bottom:10px;         /* display:none;  */    }    #demoForm .execute button {        width: 160px;height: 44px;border: medium none;border-radius: 2px;background: #00A3D9 none repeat scroll 0% 0%;font-size: 16px;color: #FFF;cursor: pointer;    }    /* http://www.ablanxue.com/prone_21850_1.html */    #demoForm .new-contentarea {        width: 100%;        overflow:hidden;        margin: 0 auto;        position:relative;        display:block;    }    #demoForm .new-contentarea label {        width:100%;        height:100%;        display:block;        color: #FFFFFF;        text-align:center;        /* font-size: 20px;        font: 400 14px/1.5 Arial,"Lucida Grande",Verdana,"Microsoft YaHei",hei; */        font: 400 20px/2.85 Arial,"Lucida Grande",Verdana,"Microsoft YaHei",hei;    }    #demoForm .new-contentarea input[type=file] {        width:166px;        height:57px;        background:#333;        /* margin: 0 auto; */        position:absolute;        top:0;        right/*\**/:0px\9;        margin-right/*\**/:0px\9;        width/*\**/:10px\9;        opacity:0;        filter:alpha(opacity=0);        z-index:2;    }    #demoForm .new-contentarea a.upload-file{        width:166px;        display: inline-block;        height:57px;        line-height: 57px;        background-color: #f38e81;        border-radius: 3px;        text-decoration:none;        cursor:pointer;    }    #demoForm .new-contentarea a.upload-file:hover{        background-color: #ec7e70;    }    </style>    <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script></head><body>    <form id="demoForm" name="demoForm" method="post" enctype="multipart/form-data" action="javascript: uploadAndSubmit();">        <div class="progressbar">             <div id="loading">                <div class="progress"></div>                <div class="percent"></div>            </div>             <div id="message"></div>         </div>         <div class="execute">            <div id="filepath"></div>             <button>立即执行</button>        </div>            <div class="new-contentarea" style="text-align:center;">            <a href="javascript:void(0)" class="upload-file"><label for="upload-file">上传文件</label></a>            <input type="file" name="file" id="upload-file" style="right:50%;margin-right:-83px;" />        </div>    </form>             <script type="text/javascript">    $("#upload-file").change(function() {        var path = $(this).val();        if (path != null && path != "") {            $(".new-contentarea").css("display","none");            $(".progressbar").css("display","none");            $(".execute").css("display","block");        }         $("#filepath").html(path);    });    function uploadAndSubmit() {        $(".new-contentarea").css("display","none");        $(".progressbar").css("display","block");        $(".execute").css("display","none");        var form = document.forms["demoForm"];        if (form["file"].files.length > 0) {            var file = form["file"].files[0];            var reader = new FileReader();            reader.onloadstart = function() {                $("#message").html("开始加载..");            };            reader.onprogress = function(p) {                $("#message").html("正在加载(Bytes：" + p.loaded + "/" + file.size + ")..");            };            reader.onload = function() {                $("#message").html("完成加载..");            };            reader.onloadend = function() {                if (reader.error) {                    $("#message").html("文件加载失败!");                } else {                    var ppt = reader.result;                    var len = $(ppt).find("a").length;                    var text = "";                    var href = "";                    var error = "";                    $(ppt).find("a").each(function(i){                        text = $(ppt).find("a").eq(i).text();                        href = $(ppt).find("a").eq(i).attr("href");                        console.log(text);                        console.log(href);                        SetProgress(((i+1)/len*100).toFixed(2));                        $("#message").html("正在处理第" + (i+1) + "条数据..").fadeIn("slow");                        $.ajax({                            type: "POST",                            url: "/save",                            data: {"name":text, "url":href},                            cache: false,                            async: false,                            dataType: "json",                            success: function(data){                                var json = data;                                if (json.status != 0) {                                    $("#message").html(json.msg);                                    error += text + "<br>" + href + "<br><br>";                                }                            }                        });                    });                    if (error == "") {                        $("#message").html("执行成功!").fadeIn("slow");                    } else {                        $("#message").html("执行失败!<br><br>" + error).fadeIn("slow");                    }                }            };            reader.readAsText(file);        }    }    function SetProgress(progress) {         if (progress) {             $("#loading div").first().css("width", String(progress) + "%"); //控制#loading div宽度             $("#loading div").last().html(String(progress) + "%"); //显示百分比         }     }     </script></body></html>
阅读全文
0 0