花了一上午的时间理了下思路，整理了下上传方面的问题。主要是关于格式的校验以及大小和数量的校验，可能有部分缺失，望大家提出，及时修正。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文件上传测试</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
.filec{
display: block;
position: absolute;
top: 0;
left: 0;
width: 180px;
height: 39px;
cursor: pointer;
opacity: 0;
filter:alpha(opacity: 0);
}
.xhx{
width: 100px;
height: 30px;
border-bottom: 1px solid #000;
display: inline-block;
line-height: 24px;
}
.button{
width: 80px;
height: 39px;
line-height: 39px;
border: 0;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="xhx" id="xhx">
请上传文件
</div>
<input type="button" class="button" name="" id="" value="点我上传" />
<input type="file" class="filec" name="test" id="file" onchange="javascript:setImagePreview();">
<div id="imgxx"></div>
<script type="text/javascript">
//单图片上传
function setImagePreview() {
var path = document.getElementById("file").value;
// alert(path);
// 分离名称和后缀
var path1 = path.split(".");
var path2 = path1[path1.length - 1].toLowerCase()
// 判断格式
if(path2.localeCompare(‘docx‘) === 0 || path2.localeCompare(‘doc‘) === 0 || path2.localeCompare(‘pdf‘) === 0) {
// alert("true");
// alert(path2);
// 去除路径和后缀名，取文件名称
var pos1 = path.lastIndexOf("\\");
// alert(pos1);
var pos2 = path.lastIndexOf(".");
// alert(pos2);
var pos = path.substring(pos1 + 1, pos2);
var text =path.substring(pos1+1);
document.getElementById("xhx").innerHTML=text;
alert("上传成功");
// alert(pos);
// 获取文件地址 本地预览
var file = document.getElementById("file");
var objectURL = window.URL.createObjectURL(file.files[0]);
// alert(objectURL);
} else if(path2.localeCompare(‘jpg‘) === 0 || path2.localeCompare(‘png‘) === 0) {
var pos1 = path.lastIndexOf("\\");
// alert(pos1);
var pos2 = path.lastIndexOf(".");
// alert(pos2);
var pos = path.substring(pos1 + 1, pos2);
// alert("上传成功");
var file = document.getElementById("file");
var objectURL = window.URL.createObjectURL(file.files[0]);
// alert(objectURL);
// 判断大小
// var obj_img = document.getElementById(‘tempimg‘);
// obj_img.dynsrc=obj_file.value;
filesize = file.files[0].size;
// alert(filesize);
var imgmax = 2 * 1024 * 1024;
if(filesize > imgmax) {
alert("文件大小超出范围");
} else {
alert("上传成功");
// 创建图片元素
var imgxx = document.getElementById("imgxx");
// 添加img
var img = document.createElement("img");
var div = document.createElement("div");
img.setAttribute("id", pos);
div.setAttribute("id", pos);
imgxx.appendChild(img);
imgxx.appendChild(div);
div.innerHTML=‘<a title="移除本图片" href="javascript:void(0);" style="float: left;margin-left: -22px;z-index: 22;background: #fff;">×</a>‘
img.width = "100";
img.src = objectURL;
img.style.float="left"
img.style.marginLeft="20px"
div.setAttribute("onclick", "javascript:removeElement(this)");
var imglength = document.getElementById("imgxx").getElementsByTagName("img").length ;
// alert(imglength);
if(imglength>3){
alert("上传完毕");
file.style.display="none";
// alert(file.display);
}
}
} else {
alert("请上传正确的格式");
}
}
// 删除图片
function removeElement(_element){
var _parentElement = _element.parentNode;
var id=_element.id;
document.getElementById(id).innerHTML = "";
document.getElementById(id).remove();
document.getElementById(id).remove();
file.value = "";
return;
}
</script>
</body>
</html>
时间： 2024-09-28 17:11:41