您的位置：首页 > Web前端 > JavaScript

多文件上传，使用js对文件进行校验，包括文件单个大小，格式，总的文件大小，文件是否为空等

2016-05-30 11:43 751 查看

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">



<title>My JSP 'upload.jsp' starting page</title>



<script type="text/javascript" src="js/jquery-2.1.1.js"></script>

<script type="text/javascript">

var num=0;
var totalSizeArray={};

//添加附件

function AddAttachments()

{

document.getElementById('attach').innerText = "继续添加附件";

tb = document.getElementById('attAchments');

newRow = tb.insertRow();

newRow.insertCell().innerHTML = "<input name='file' size='50' type='file' id=file"+num+">  <input type='button' value='删除' onclick='delFile(this.parentElement.parentElement.rowIndex)'>    <label id=p"+num+"></label>";


totalSizeArray[num]=0;

num ++;
}

//删除附件类容

function delFile(index)

{

totalSizeArray[index]=0;

document.getElementById('attAchments').deleteRow(index);

tb.rows.length > 0?document.getElementById('attach').innerText = "继续添加附件":document.getElementById('attach').innerText = "添加附件";

}

$(document).ready(function(){

$("#btnSend").click(function(){
var fileLength=$("input[type='file']").length;

//判断是否有上传的文件

if(fileLength==0){
alert("当前没有可上传的文件");
return false;
}else{
for(var i=0;i<document.form1.elements.length-1;i++)
{

//判断文控件间内容是否为空

if(document.form1.elements[i].value=="")

{

alert("当前表单不能有空项");

document.form1.elements[i].focus();

return false;

}
}

//判断文件总大小是否大于10M

var totalSize=0;
for(x in totalSizeArray){
totalSize=totalSize+totalSizeArray[x];
}
if(totalSize>1024*10){
alert("文件总大小为："+totalSize/1024+"MB,超过了10MB,请重新选择文件！");
return false;
}else{
$("#form1").submit();
}
}

});

});

$(document).ready(function () {

$("#attAchments").delegate("input[type='file']","change",function(){

var filepath = $(this).val();

var fileId=$(this).attr("id");

var countNum=fileId.substring(4,fileId.length);

var count="p"+countNum;

var extStart = filepath.lastIndexOf(".");
var ext = filepath.substring(extStart, filepath.length).toUpperCase();

//判断文件类型

if (ext==".ZIP"||ext==".RAR" ||ext==".TXT") {

alert("不能上传后缀名为.txt、.rar、.zip类型的文件！");
var obj = document.getElementById(fileId) ;
obj.outerHTML=obj.outerHTML;

$("#"+count).text("");

return false;

} else { $("#"+count).text(filepath);}

var fileSize=0;
fileSize=this.files[0].size;
var size=fileSize/1024;
size=Math.round(size);

//判断单个文件是否大于2M

if(size>1024*2){

alert("单个文件大小不能超过2M,请重新选择文件！");

var obj = document.getElementById(fileId) ;
obj.outerHTML=obj.outerHTML;

$("#"+count).text("");
}else{

totalSizeArray[countNum]=size;

size=$("#"+count).text()+"\t\t\t\t"+size;

$("#"+count).text(size+"KB");
}

});

});



</script>

<body>

<form id="form1" name="form1" method="POST" enctype="multipart/form-data" action="uploadServlet">

<table id="attAchments">

</table>

</form>

<a id="attach" onclick="AddAttachments();" href="javascript:;" name="attach">添加附件</a>

<input type="button" id="btnSend" value=" 上传 "/>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web js 多文件上传添加附件文件校验

相关文章推荐

新的分享

章节导航