HTML5 File Reader file upload 文件上传 test

最新推荐文章于 2024-06-19 15:16:12 发布
最新推荐文章于 2024-06-19 15:16:12 发布
阅读量6.8k 收藏 1
点赞数
分类专栏： javascripit 文章标签： file upload html5 function jquery path
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WolfMan_SunnyWolf/article/details/7520776
版权 
<!doctype html>
<html>
<head>
    <title>import project</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <style>
        body {
            text-align: center;
            background-color: #DEF3FE;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 80%;
            color: #666;
            margin: 0;
            padding: 0;
        }

        .File_Upload_Form {
            width: 600px;
            margin: 30px auto;
            background-color: #FFF;
            border-radius: 4px;
            padding: 4px 20px 20px 20px;
        }

        .span {
            width: 200px;
        }

        h1 {
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 170%;
            color: #645348;
            font-style: italic;
            text-decoration: none;
            font-weight: 100;
        }

        input[type="submit"] {
            border: 1px solid #917568;
            border-radius: 4px;
            margin: 0;
            padding: 4px 10px 4px 10px;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 14px;
            font-style: italic;
            color: #333333;
            text-shadow: 1px 1px 0 #fff;
            background-color: #A5B276;
            background-image: -webkit-linear-gradient(#CED8AF, #A5B276);
            background-image: -moz-linear-gradient(center bottom, #A5B276 0%, #727E47 100%);
            background-size: 1px 50px;
            padding: 5px;
            cursor: pointer;
            -webkit-transition: background .5s ease-out;
        }

        input[type="submit"]:Hover, :focus {
            background-position: 100px;
        }
        .resultDiv{
        	min-height:300px;
        	/*border:1px solid #ccc;*/
        }
        .tb_tip td{
        	vertical-align: top;
        	text-align: left;
        	padding-left:10px;
        	width:50%;
        }
        .tb_tip {
        	 width:100%;
         }
        .resultTip {
         	color:red;
         	float: left;
			margin: 10px;
         }
         ul{
         	list-style: none;
         }
         ul li{
         	width: 230px;
			height: 31px;
			line-height: 28px;
			text-align: left;
   			position: relative;
			
         }
         ul li input{
         	right:12px;
			position:absolute;
			width:150px;
         }
         ul li select{
         	right:12px;
			position:absolute;
			width:152px;
         }
         .bytes_total{
        	float: right;
         	margin-right: 20px;
         }
         .lineborder{
        	 border-bottom:1px dashed #ccc;
         }
         
         .lineborder:odd {
        	 
         }
         .div_File span{
        	 padding-left:10px;
         }
         .div_File:even{
        	 background-color:pink;
         }
    </style>
</head>

<body>
<div class="File_Upload_Form">
    <h1>Import project to Cloud</h1>
<input type="hidden" value="${userName}"  id="userName" name="userName"/>

    <form enctype="multipart/form-data" id="importForm" action="javascript: doImport();">
    	
    	<ul >
    		<li>
		        <span>项目标识:</span><input type="text"  name="projectName" id="projectName" list="searchlist" required value="testClear"></input>
		        <datalist id="searchlist">
		        	 #foreach($!item in $!myProjectList)
		        	 	 <option value="$!item.project.identifying" label="$!item.project.name" />
 					 #end
				</datalist>
				
		    </li>
    		<li>
		       节点类型:
			        <select id="cbDomain" name="cbDomain">
			            <option value="hivesql">HIVE SQL</option>
			            <option value="shell">SHELL</option>
			            <option value="odpsSql" default="true">ODPS SQL</option>
			            <option value="cfg" default="true">CFG</option>
			        </select> 
		    </li>
		    
	    </ul>
		 <div style="width:415px;"> 
		 	<input type="file" οnchange="showSelectFiles()"  name="import_file" multiple webkitdirectory="" directory="" mozdirectory>
       		<input type="submit" value="Upload File"/>
 		</div>

        
    </form>
    <div class="resultTip" style='display:none'></div>
   	<table class="tb_tip">
   	<tr>
   	<td colspan="2" style="padding-bottom: 13px;">
   	 
   	<div id="progress" class="resultDiv" style="width:100%;line-height: 1.5;"/>
   	</td>
   	</tr>
   	<tr style="display:none">
   	<td style="">
   			成功文件:
   			 <div id="succssedFile" class="resultDiv">
		   	</div>
   	</td>
   	<td>
   			失败文件:
		    <div  id="failedFile" class="resultDiv">
		   	</div>
		   	</td>
	</tr>
   	</table>
   		
</div>
<script>
	
	resultInfo={
		successedfiles:[],
		successedIds:[],
		failedfiles:[]
	}
	fileActionType={
		viewFile:1,
		uploadFile:2
	}
	
    function errorHandler(e) {
        var msg = '';
        switch (e.code) {
            case FileError.QUOTA_EXCEEDED_ERR:
                msg = 'QUOTA_EXCEEDED_ERR';
                break;
            case FileError.NOT_FOUND_ERR:
                msg = 'NOT_FOUND_ERR';
                break;
            case FileError.SECURITY_ERR:
                msg = 'SECURITY_ERR';
                break;
            case FileError.INVALID_MODIFICATION_ERR:
                msg = 'INVALID_MODIFICATION_ERR';
                break;
            case FileError.INVALID_STATE_ERR:
                msg = 'INVALID_STATE_ERR';
                break;
            default:
                msg = 'Unknown Error';
                break;
        };
        console.log(msg);
    }
	function showSelectFiles(){
		doImport(fileActionType.viewFile);
	}
	
	
    function doImport(type) {
    	if(type==fileActionType.viewFile){
    		 jQuery("#progress").empty();
    	}
        var v_file_list = $("#importForm :file ").attr("files");
        if (v_file_list.length == 0 ) {
            alert("Please choose a file.");
            return 0;
        }

        function processFile(index){
            file = v_file_list[index];
            if (!file) return;
            var file_path = file.webkitRelativePath;
            if( file_path[file_path.length - 1]=='.') {
                processFile(index + 1);
                return;
            }

            var reader = new FileReader();
            reader.onloadstart = function () {
            	console.info(type==fileActionType.viewFile+"-------------");
            	 if(type==fileActionType.viewFile){
	                console.log(file_path + " onloadstart");
	                var fileDiv= $('<div class="div_File"></div)').attr("id", "file_" + index);
	                fileDiv.appendTo("#progress");
	                var infoStr=[];
	                infoStr.push('<span  class="file_path" title="'+file_path+'">'+substr_(file_path,35,"...")+'</span>');
	               // infoStr.push('<span  class="bytes_read">'+" read:" + 0+'</span>');
	                infoStr.push('<span  class="bytes_total">'+"fileSize: "+ file.size + "  "+'</span> <br/>');
	                fileDiv.append(infoStr.join(""));
            	 }
            }

            reader.onprogress = function (p) {
                console.log(file_path + " onprogress");
                $("#"+"file"+ index + " #bytes_read").text(" read:" + p.size)
            }

            reader.onload = function () {
                console.log(file_path + " load complete");
            }
            reader.onloadend = function () {
            	
            	if(type!=fileActionType.viewFile){
	                // 文件路径
	                console.log(file_path + " onloadend");
	                // 文件名字从路径中截取
	                // TODO
	                // 文件类型让用户选择
	                if (reader.error) {
	                    errorHandler(reader.error);
	                    console.log(reader.error);
	                    resultInfo.failedfiles.push(file_path);
	                    if(index==(v_file_list.length-1)){
	                    	showResultInfo();
	                    }
	                    
	                } else {
	                    jQuery("#"+"file"+ index + " #bytes_read").text(" read:" + file.size);
	                    console.log("result is----:" + this.result);
	                    importFile(file,reader,index==(v_file_list.length-1),index);
	                }
            	}
            	if(index==(v_file_list.length-1)){
            		 $(".div_File:even").css("background", "#E3E3E3");
            	}
                processFile(index + 1);

       	 }
            
            
            reader.readAsText(file, "UTF-8");
        }
        processFile(0)
    }


    function importFile(file,reader,isLast,index){
    
    	var filePath=file.webkitRelativePath;
    	var index_=filePath.lastIndexOf("/");
    	var fileName=filePath.substring(index_+1);
    	var path=filePath.substring(0,index_+1);
        var url="json/jsonReq.do"
        console.log("do post");
        url+="?actionName=addFile";
        url+="&username="+jQuery("#userName").val();
        url+="&identifying="+jQuery("#projectName").val();
        var data_={
        	fileContent:reader.result,
        	path:path,
        	fileName:fileName,
        	comment:'testcomment..',
        	type:jQuery("#cbDomain").val()
        }
        
        jQuery.ajax({
		   type: "POST",
		   data:{ data:JSON.stringify(eval(data_)) },
		   url: url,
		   success: function(resData){
			var lineBorder;
			if(isLast){
				lineBorder="";
			}else{
				lineBorder="<div class='lineborder'/>";
			}
			
		   	var resObj = eval("(" + resData + ")");
		   	if(resObj.retCode==0){
		     resultInfo.successedfiles.push(filePath);
			 resultInfo.successedIds.push(resObj.jobId);
			 jQuery("#file_"+index).append("<span style='color:blue'>成功  taskId: "+resObj.jobId+"</span>"+lineBorder);
		   	}else{
		   	 jQuery(".resultTip").append(resObj.errMsg+'</br>');
		   	  resultInfo.failedfiles.push(file.webkitRelativePath);
		   	  jQuery("#file_"+index).append("<span style='color:red'>失败:   "+resObj.errMsg+"</span>"+lineBorder);
		   	}
		   	if(isLast){
		   		setTimeout(function(){showResultInfo();},500)
		     }
		     
		   },
		   error: function(msg){
		     resultInfo.failedfiles.push(file.webkitRelativePath);
		     jQuery("#file_"+index).css("color","red");
		     if(isLast){
		   		setTimeout(function(){showResultInfo();},500)
		     }
		   }
		   
		});

      
     }
     
    //显示上传结果
     function showResultInfo(){
     	jQuery("#succssedFile").empty();	
     	jQuery("#failedFile").empty();	
     	for(var i=0; i<resultInfo.successedfiles.length;i++){
				jQuery("#succssedFile").append(resultInfo.successedfiles[i]+"</br>")
     	}
     	
     	for(var i=0; i<resultInfo.failedfiles.length;i++){
				jQuery("#failedFile").append(resultInfo.failedfiles[i]+"</br>")
     	}    
     	
     	doPublish();
     }
     
     //调用 publish 服务  
     function doPublish(){
		var taskIds = resultInfo.successedIds.join(",");
     	var url="yy.do";
     	 url+="?actionName=doPublish";
    	  jQuery.ajax({
   		   type: "POST",
		   data:{ "taskIds": taskIds },
   		   url: url,
   		   success: function(resData){
   		   	var resObj = eval("(" + resData + ")");
   		   	if(resObj.retCode==0){
   		   	 //jQuery(".resultTip").append('scheduler 已接受处理').css("color","#ccc");
   		   	}else{
   		   	 jQuery(".resultTip").append('调用 doPublish 服务失败');
   		   	}
   		   },
   		   error: function(msg){
   			 jQuery(".resultTip").append('doPublish 失败,请检查 '+msg);
   		   }
   		   
   		});
     }
     
     String.prototype.substr_=function(length,fix){
    		return this.length>length?this.substring(0,length)+fix:this;
    	}

     function substr_(objStr,length,fix){
    		if(objStr){
    			return objStr.substr_(length,fix)
    		}
    		return "";
    }
</script>
</body>
</html>

WolfMan_SunnyWolf
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html 上传文件
diaohuyi6830的博客
10-20 41
1.html代码 <form id="form1" action="TestYield" method="post" enctype="multipart/form-data"> <div> <input type="text" id="title" name="title"/> ...
JS 文件上传之 FileReader
Rand Tsui
03-20 3288
SA $.domLoad(function () { $("#bt").onclick = function () { var file = document.createElement("input"); file.setAttribute("type","fil
vue el-upload 上传单个文件正常，上传整个文件夹报错
最新发布
adam1011的博客
06-19 164
当选中文件后，会在file对象中生成一个webkitRelativePath的值。webkitRelativePath会包含文件夹的对应路径，但是进行上传时会因为这个值导致报错，报跨域的错误。以上代码将文件对象中的webkitRelativePath值替换，之后可以正常做到文件夹上传。webkitRelativePath的值无法直接修改，只能替换掉了。对dom元素添加webkitdirectory属性。上传文件夹时使用的代码为。
【Vue】 前端上传图片时限制只可以按文件夹上传图片( webkitdirectory )
程邓楠的博客
09-29 1万+
最近再对公司前后端不分离的【 C#、Winform 】系统进行【Java、Web】重构，为了保持客户使用习惯所以要高度还原，其中有一个功能就是上传图片时，以文件夹进行上传，要读取文件夹内所有的图片！ 看了挺多大神的博客，也看了【 Element-UI】 的 el-upload 发现都没有合适的，只能利用 【input 标签的 type 属性】来实现这个需求了！！！
vue打包过后，出现文件路径空白问题
qq_46019581的博客
10-25 181
vue 打包在根目录添加vue.config.js，填入以下内容，解决打包文件路径的引用问题。 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/' }
前端如何实现拖拽文件和文件夹上传
friend_ship的博客
07-19 6064
如果是点击上传文件夹，可以给input添加webkitdirectory属性，但是拖拽上传文件夹，拿不到文件所在路径，也就是webkitRelativePath值为空。下图所示： FileSystemDirectoryEntry接口的方法createReader()返回一个FileSystemDirectoryReader 可以被用于读取在该目录中的条目的对象。 在vue中的示例代码...
上传按钮file美化
05-28
在提供的文件列表中，有`jQuery_file`，这可能是一个包含jQuery插件的文件，用于进一步增强上传功能，如预览图片、多文件选择等。 使用jQuery，我们可以监听`change`事件，当用户选择文件后，可以实时显示所选图片...
Ajax异步文件上传与NodeJS express服务端处理
11-27
在HTML中，通常会有一个`<input type="file">`元素让用户选择要上传的文件，以及一个按钮触发上传过程。例如： ```html <input type="file" name="file" id="file" /> <button id="upload">上传 ``` 当用户点击...
layui实现文件压缩上传
12-25
layui的upload模块提供了一个便捷的文件上传接口，支持多文件上传、拖拽上传、进度条显示等功能。通过简单的配置，开发者可以轻松地在项目中集成这一功能。例如，可以通过以下代码创建一个基础的图片上传组件： ``...
WEB解析本地文件
07-12
testfile.txt文件： 本地文件，即要被操作的文件。 jquery.js文件； jquery代码运行需要的js文件. interaction.html文件： 人机交互方式实现，WEB操作本地文件； h5文件操作API,FileReader()方式实现，传入...
多图片上传jq 前端部分
03-20
5. **限制与验证**：为了防止用户上传过大的文件或不合适的格式，可以在选择文件后进行验证。例如，检查文件大小和类型： ```javascript function isImage(file) { return /\.(jpg|jpeg|png|gif)$/i.test(file....
拖拽获取文件路径html,【前端】前端如何实现拖拽文件夹上传
weixin_30303839的博客
06-08 1683
如果是点击上传文件夹，可以给input添加webkitdirectory属性，但是拖拽上传文件夹，我找遍全网也没找到满意的答案，最接近的一个答案，确实是拿到了数据，这里有demo： https://wicg.github.io/direct…但是拿不到文件所在路径，也就是webkitRelativePath这个问题困扰很久了，只能求助于社区了。如果是无法实现的话请告知一下，或者有其他方法的，在下不...
文件上传，搞懂这8种场景就够了
奇舞周刊
07-14 904
在日常工作中，文件上传是一个很常见的功能。在项目开发过程中，我们通常都会使用一些成熟的上传组件来实现对应的功能。一般来说，成熟的上传组件不仅会提供漂亮 UI 或好的交互体验，而且还会提供多...
python拖拽获取文件路径_webuploader拖拽上传文件/文件夹，如何获取文件的路径
weixin_39624071的博客
12-04 821
webuploader拖拽上传文件或文件夹时，怎么获取到文件的路径webkitRelativePath。如果通过的方式，是可以获取到里面文件的路径，但是拖拽的话，看到里面的路径为空的。// 当有文件被添加进队列的时候uploader.on('fileQueued', function( file ) {console.log(file);uploader.md5File( file )// 及时显...
前端实现选择文件夹功能 并获取文件夹名 input webkitdirectory
吉法师的博客
04-12 1万+
我们都知道input标签type="file"的时候，会打开一个文件选择器，但并不支持选择目录。 如果要支持选择目录，且必须只是目录的话，用下列的代码： <input type='file' @change="triggerFile($event)" webkitdirectory> change绑定了一个函数，函数的内容为: triggerFile(event) { let file = event.target.files; console...
vue 选择本地文件目录
热门推荐
yxs646512415的博客
10-15 3万+
vue 选择本地文件目录先看效果原码片断 通过的vue结合原生的input 进行本地文件系统目录的选择 先看效果 传统的文件处理会有一些文件上传相关的插件，但有时候会有一些需求是不能简单选择一个文件上传就能解决的，如果要本地文件目录中的文件进行相关的逻辑处理，就比较麻烦，然后我做了本地一个文件目录选择的例子，只要得到目录地址，后面想怎么操作就看大家发挥了, 先看代码： 注解： 1处这里是一个普通的html 按钮，值得注意的是这里需要多加一个 webkitdirectory 参数，表示文件夹选择器。
vue webkitdirectory属性上传文件夹
西鱼的博客
01-09 3513
element 上传组件不支持文件夹上传，。。。使用input的webkitdirectory属性可上传文件夹 <input ref="file" class="fileUploaderClass" type='file' name="file" webkitdirectory @change.stop="changesData"/> changesData () { co...
前端开发JS框架之jQuery的基础知识分享
m0_58371965的博客
12-07 194
jQuery对象 jQuery对象是通过jQuery包装DOM对象后产生的对象 注意：jQuery对象只能使用jQuery里的前端培训方法，DOM对象只能使用DOM对象的方法 jQuery基础知识点 查找标签 基本选择器 id选择器：$('#id') 标签选择器：$('tagName') class选择器：$(".className“） 配合使用：$("div.c1") //找到有c1的div标签 所有元素选择器：$("*") 组合选择器：$("#id, .className, tag
el-upload上传文件点击预览
11-08
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb 预览 </el-upload> data() { return { testForm: { fileList: [], fileContentList: [] }, previewFileId: '', ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值