首页 > 其他 > 详细

xml文件从本地导入,并把XML文件中的数据传入另一页面

时间:2020-11-24 17:11:53      阅读:40      评论:0      收藏:0      [点我收藏+]

刚刚写了一个文件导入功能,中间遇到了很多问题,记录一下

首先是导入页面,把文件放到form里

     <div class="modal fade" id="importParameterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" id="close-btnupload" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="importFileModal" data-lang="dpsettings.fileimport"></h4>
                    </div>
                    <div class="modal-body">
                        <div class="filepage">
                            <div class="row">
                                <div class="col-md-offset-3 col-md-5">
                                    <div class="upload_form_cont">
                                        <form id="import_form" enctype="multipart/form-data" method="post" >
                                            <div>
                                                <div class="file_select">
                                                    <label for="file_import" style="position: relative;">
                                                        <input type="button" id="file_import_btn" value="点我上传" style="padding: 5px 10px;background: #428bca;color: #fff;border: none;border-radius: 5px;"><span id="import_btn_text" data-lang="setting-choose-file"></span>
                                                        <input type="file" name="file_import" id="file_import" class="file_upload" onchange="fileSelected();" style="position: absolute;left: 0;top: 0;opacity: 0;"/>
                                                    </label>
                                                    <button id="import_btn" type="button" onclick="startImporting()" class="upload_btn" style="position: absolute;left: 260px;top: 0px;">
                                                        <i class="glyphicon glyphicon-upload"></i>
                                                        <span data-lang="dpsettings.import"></span>
                                                    </button>
                                                </div>
                                            </div>
                                            <div id="fileinfo">
                                                <div id="filename"></div>
                                                <div id="filesize"></div>
                                                <div id="filetype"></div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
function fileSelected() {
    // get selected file element
    var oFile = document.getElementById(‘file_import‘).files[0];

    if (!oFile) {
        return;
    }

    var oReader = new FileReader();
    oReader.onload = function(e) {
        var sResultFileSize = fileBytesToSize(oFile.size);
        document.getElementById(‘fileinfo‘).style.display = ‘block‘;
        document.getElementById(‘filename‘).innerHTML = $.i18n.prop(‘setting-file-upload-name‘) + ‘ ‘ + oFile.name;
        document.getElementById(‘filesize‘).innerHTML = $.i18n.prop(‘setting-file-upload-size‘) + ‘ ‘ + sResultFileSize;
        document.getElementById(‘filetype‘).innerHTML = $.i18n.prop(‘setting-file-upload-type‘) + ‘ ‘ + oFile.type;
    };

    oReader.readAsDataURL(oFile);
    var keywords = $("#file_import").val();
    if (keywords.indexOf(name) > -1) {
        keywords =keywords.substring(keywords.lastIndexOf("\\")+1);
        if (keywords.length > 20) {
            var hideStr = keywords.substring(14, keywords.length-4);
            keywords=keywords.replace(hideStr,"...");
        }
    }
    $("#import_btn_text").html(keywords);
}

function fileBytesToSize(bytes) {
    var sizes = [‘Bytes‘, ‘KB‘, ‘MB‘, ‘GB‘];
    if (bytes == 0) return ‘n/a‘;
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
    return (bytes / Math.pow(1024, i)).toFixed(1) + ‘ ‘ + sizes[i];
}

文件上传页面如下:

技术分享图片

此时文件只是在页面上,还未导入,下面进行文件导入

function startImporting() {
    if (!document.getElementById(‘file_import‘).value) {
        swal("",$.i18n.prop("no-file-selected"),"warning");
        return;
    }

    var vFD = new FormData(document.getElementById(‘import_form‘)); //需要对文件的form进行FormData封装
    var oXHR = new XMLHttpRequest();
    oXHR.open(‘POST‘, ‘url‘, true);
    oXHR.send(vFD); //发送文件数据去后台处理
    oXHR.onreadystatechange=function(){
        if(oXHR.readyState===4){
            if(oXHR.status===200){ //后台成功处理后进入里面
                var message=oXHR.responseText; //这是成功后后台返回的数据
                if(sessionStorage.getItem("type") == "cloud"){
                    window.location.href="url2/new?data="+ escape(message); //注意这里对另一页面传数据,需要对数据进行编译
                }else{
                    window.location.href="url3/new?data="+ escape(message);

                }
            }else{
                alert("发生错误:"+ oXHR.status);
            }
        }
    };
}

传到后台对文件进行处理,此处处理的是XML文件

@POST
@Path("/importfile")
@Produces({ "application/xml", "application/json" })
public void importFile(){
   try {
            

                DiskFileItemFactory factory = new DiskFileItemFactory();
                ServletFileUpload upload = new ServletFileUpload(factory);
                upload.setHeaderEncoding("UTF-8");
                if (!ServletFileUpload.isMultipartContent(request)) {
                    throw new BadRequestException("Upload files do not belong to the form.");
                }
                List<FileItem> list = upload.parseRequest(request);
                for (FileItem item : list) {
                    if (!item.isFormField()) {
                        String filename = item.getName();
                        if (filename == null || filename.trim().equals("")) {
                            continue;
                        }

                        InputStream in = item.getInputStream();
                        byte buffer[] = new byte[2048];
                        int len = 0;
                        String str="";
                        while ((len = in.read(buffer)) > 0) {
                            str = new String(buffer, 0, len);   

                        }

                        in.close();
                        item.delete();

                        Document document = DocumentHelper.parseText(str);
                        Element root = document.getRootElement();
                        Element ab = root.element("ab");
                        info.setName(ab.attributeValue("name"));
                        info.setType(ab.elementText("type"));
                    }
                }
            
            JSONObject json = JSONObject.fromObject(info);
            String strJson = json.toString();
            PrintWriter writer = response.getWriter();
            response.setContentType("application/json;charset=utf-8");
            writer.print(strJson);
            writer.close();
        } catch (Exception e) {
            log.info("import file failed.");
            e.printStackTrace();
        }
        
    }  

 

接收数据的页面如何接收数据

var data_o = unescape(ab));//这里的ab为页面地址?后的data
var data = JSON.parse(data_o);//这里对接收的数据转换成json,后续方便使用

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

导入文件后页面如下图:

 

xml文件从本地导入,并把XML文件中的数据传入另一页面

原文:https://www.cnblogs.com/liqingguo/p/14031173.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!