html input传文件夹并解析内容

最新推荐文章于 2023-01-09 00:59:47 发布

还真是个坚强的女汉纸呢

最新推荐文章于 2023-01-09 00:59:47 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签：上传文件夹导出json 解析文本或图片

本文链接：https://blog.csdn.net/u014371184/article/details/101544778

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>3D编辑器</title>
</head>
<body>
导入本地文件：<input type="file" name="file" id="importFile" webkitdirectory />
导出本地文件：<input type="button" value="导出" id="exportFile"/>
<script src="${ctx}/static/js/FileSaver.js"></script>

<script>
	
	var temp;
	var paths = {			
			"m":[],
			"mat":[],
			"sky":{},
			"ao":'',
			"a":[]
			
	};
	var input = document.getElementById("importFile");

	input.onchange=function(){
		//console.log(this.files);
		var fileList = this.files;
		uploadMulFile(fileList);
		/**var file = this.files[0];
		if(file){//单个文件的读取
			var reader = new FileReader();
			reader.readAsText(file,"UTF-8");
			reader.onload=function(){
			temp = this.result;	
			console.log(temp);
			var jsonData = JSON.parse(temp);
			console.log(jsonData);
			}
		}**/
	}
//多个文件一个一个读
	function uploadMulFile(uploadFile) {
	    var fileLength = 0;
	    var reader = new FileReader();
	    if ( uploadFile[fileLength].type.match( 'image.*' ) ) {	                    
            reader.readAsDataURL(uploadFile[fileLength]);
        } else {
     		  	reader.readAsText(uploadFile[fileLength],"UTF-8");
        }
		//reader.readAsText(uploadFile[fileLength],"UTF-8");
	    reader.onabort = function(e) {
	         console.log("文件读取异常" + uploadFile[fileLength].name);
	    };
	    reader.onerror = function(e) {
	         console.log("文件读取出现错误" + uploadFile[fileLength].name);
	    };
	     reader.onload = function(e) {
	        if(e.target.result) {
	            console.log("完成" + uploadFile[fileLength].name+"  路径为："+uploadFile[fileLength].webkitRelativePath);
	           // console.log(e.target.result);//这是结果
	           
	           fileLength++;
	             if(fileLength < uploadFile.length) {
	            	 if ( uploadFile[fileLength].type.match( 'image.*' ) ) {	                    
	                     reader.readAsDataURL(uploadFile[fileLength]);//读图片
	                 } else {
	   	       		  	reader.readAsText(uploadFile[fileLength],"UTF-8");//读文本
	                 }
	           } else {
	            	//do something
		            console.log('本地文件已经全部读取完毕'+typeof(paths));
	            	console.log(JSON.stringify(paths));
		           // console.log(JSON.parse(paths));
	             }
	        }
	     };
	 }  
//导出为json文件
	var button = document.getElementById("exportFile");
	 button.addEventListener("click", saveHandler, false);
	 function saveHandler(){
	      let data = {
	          name:"hanmeimei",
	          age:88
	      }
	      var content = JSON.stringify(data);
	      var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
	      saveAs(blob, "save.json");
	 }
	 
	
</script>
</body>
</html>

附上FileSave.js

链接: https://pan.baidu.com/s/1Tw1ZkBbLNq6O_H7trXNwlQ 提取码: peww

还真是个坚强的女汉纸呢

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html input传文件夹并解析内容

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dt...
复制链接

扫一扫