使用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']")
}