zoukankan      html  css  js  c++  java
  • 使用WebUploader上传HTML文件并读取文件

    需求:

    前端需要上传HTML文件并识别里面有多少个特殊标签并录入到数据库。

    思路:

    使用WebUploader上传文件,然后使用FileReader接口和DOMParser识别HTML中的特殊标签

    资料:

    http://fex.baidu.com/webuploader/getting-started.html

    1、引入的文件

    <link rel="stylesheet" type="text/css" href="../webuploader.css">
    <script type="text/javascript" src="../webuploader.js"></script>
    <script src="../jquery-1.11.1.min.js"></script>

    2、页面代码

    <label for="upload_file" class="col-sm-2 control-label">模板文件</label>
    <div id="uploader" class="wu-example">
    <input type="text" disabled class="form-control" name="newTemplate_file" id="newTemplate_file"/>
    <div class="btns">
    <div id="picker">选择文件</div>
    </div>

    3、上传控件初始化

    var fileUploader = WebUploader.create({
                        swf:'libs/TagImgManager/Uploader.swf',
                        server:"http://localhost:8080/aa.php",//上传服务
                        pick: '#picker',
                        resize: false,
                        accept: {
                        title: 'HTML',
                        extensions:'html',
                        mimeTypes:'text/html'
                        }
                    });

    4、显示选中的HTML文件名称

     fileUploader.on( 'fileQueued', function( file ) {
                     document.getElementById("newTemplate_file").value=file.name;
                });

    5、获取HTML文本内容

        fileUploader.on( 'uploadSuccess', function( file ) {
                     var reader=new FileReader();
                     reader.readAsText(file.source.source);
                     reader.onload=function(){
                         var result=this.result;//HTML文本
                         readDom(result);
                    }
                });

    6、识别文本标签

    function readDom(Htmlstr){
      var parser = new DOMParser()
      var page = parser.parseFromString(Htmlstr,"text/xml");//将字符转化成dom对象
      var Tags=[];
      var values=$(page.childNodes["0"].childNodes[3]).find("[id^='tag']")
    }
    
    
  • 相关阅读:
    Git 开发、合并、提交的一些常见命令语句
    selenium自动化过程中窗口句柄的问题
    git 忽略文件夹下面的文件,但是保留空文件夹
    python接口测试中不同的请求方式
    python接口测试中发送请求中的一些参数
    python接口测试中的session运用
    接口测试数据依赖处理
    pygame的安装
    Bottstrap的基本用法
    前端CSS
  • 原文地址:https://www.cnblogs.com/GIScore/p/7205596.html
Copyright © 2011-2022 走看看