xml文件一键上传并解析到前端界面

xml文件一键上传并解析到前端界面

本文主要是一键选择xml文件传到后台解析再传回到前台界面，利用bootstrap table展示并能进行表内编辑：
关键词：

• 一键上传
• xml解析
• bootstrap table
• bootstrap table edit

---

需要的js

 <script src="./lib/jquery-3.2.0.min.js"></script>
   	<script src="./lib/bootstrap/js/bootstrap.min.js"></script>	
	<script src="./lib/bootstrap-table/bootstrap-table.js"></script>
	<script src="./lib/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
	<script src="./lib/bootstrap3-editable/js/bootstrap-editable.js"></script>
	<script src="./lib/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>

##一键上传

 <form  name="myForm" enctype="multipart/form-data" >
	<input type="hidden" class="btn btn-primary disabled" id="btn" value="确定" >    			                  
	<input style="display:inline-block;" type="file" accept="text/xml" name="xmlfile" onchange="$('#btn').click();"> 					         
		 </form>	

本来网上百度到了jquery的ocupload.js但是跟我的需求不符，我需要无刷新上传并把解析的数据展示到网页上。

##bootstrap展示

   $('#btn').click(function () {
	        var xmlfile = document.myForm.xmlfile.files[0]; 
	        var fm = new FormData();
	        fm.append('xmlfile', xmlfile);
	        $.ajax({
                url: 'servlet/UploadXML',
                type: 'POST',
                async: false,
                data: fm,
                contentType: false, //禁止设置请求类型
                processData: false, //禁止jquery对DAta数据的处理,默认会处理
                //禁止的原因是,FormData已经帮我们做了处理
                success: function (result) {
                	var obj=null;
                    //测试是否成功
                    //但需要你后端有返回值
                    //alert(result);
                    obj= eval("("+result+")");
    				 $('#userTable').bootstrapTable({
    					method : 'get',
    					cache : false,
    					height : 600,
    					toolbar: '#toolbar',                //工具按钮用哪个容器
    		            striped: true,                      //是否显示行间隔色
    					pagination: true,
    					pageSize : 10,
    					pageNumber : 1,
    					pageList: [5,10, 20, 50, 100],
    					showColumns : true,
    					showRefresh : true,
    					showToggle : true,
    					showExport : true,
    					//clickToSelect: true, //是否启用点击选中行
    					exportTypes : [ 'csv', 'txt', 'xml' ],
    					search : true,
    					
    					columns: [
                        //{field:"action",title:"操作",align:"center",valign:"middle",formatter:"actionFormatter",event:"actionEvents"},
    					{field:"select",title:"全选",checkbox:true,width:20,align:"center",valign:"middle"},					
    					{field:"fieldName",
    						title:"字段输入",
    						align:"center",
    						valign:"middle",
    						sortable:"true",
    					    editable: {
    		                    type: 'text',
    		                    title: '字段名',
    		                    validate: function (v) {
    		                        if (!v) return '用户名不能为空';

    		                    }
    		                }
    						},
    					{field:"nodeName",title:"节点名称",align:"center",valign:"middle",sortable:"true"},
    					{field:"nodecontent",title:"节点内容",align:"center",valign:"middle",sortable:"true"},
    					{field:"nodepath",title:"节点路径",align:"center",valign:"middle",sortable:"true"}
    					
    					],
    					data:obj,
    					onEditableSave: function (field, row, oldValue, $el) {
    				    	var productName=$('#producttype').val();
    				    	var productTable=$('#tablename').val();	
    			                $.ajax({
    			                    type: "post",
    			                    url: "./servlet/fieldedit",
    			                    data: {"objSelec":JSON.stringify(row),"fileName":JSON.stringify(xmlfile.name),
    			                    	"productName":JSON.stringify(productName),"productTable":JSON.stringify(productTable)},//json序列化，不能直接传送json对象
    			                    dataType: 'JSON',
    			                    success: function (data, status) {
    			                        if (status == "success") {
    			                            alert('提交数据成功');
    			                        }
    			                    },
    			                    error: function () {
    			                        alert('编辑失败');
    			                    },
    			                    complete: function () {

    			                    }

    			                });
    			            }

    				});	
                }
            });
    		    $(window).resize(function () {
    				$('#userTable').bootstrapTable('resetView');//移除表数据
    			});
            });

后台是用java解析的，代码就不放了，开发用到了 JSP+Servlet+JavaBean的方式，并没有用到很流行的mvc框架。
原创请尊重知识成果，转载请注明。