HTML5 File Reader file upload 文件上传 test
晏晨朗
<!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>
类似资料：