刚刚写了一个文件导入功能,中间遇到了很多问题,记录一下
首先是导入页面,把文件放到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">×</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,后续方便使用
导入文件后页面如下图:
原文:https://www.cnblogs.com/liqingguo/p/14031173.html