87,916
社区成员
发帖
与我相关
我的任务
分享js怎么判断和控制表单上传文件的大小和类型
我是·一个初学者，做了一个提交表单的页面，现在JS只能提示有没有填写信息，但是不能提示上传文件的 大小和类型，如何在此基础上修改下就能实现提示上传文件的 大小和类型，谢谢各位
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>试验田</title>
<script type="text/javascript">
function checkname() {
var check = false;
var name = document.getElementById("name").value;
if (name == "") {alert("请输入您的姓名");check = false;} else {check = true;}
return check;
}
function checkchepai() {
var check = false;
var chepai = document.getElementById("chepai").value;
if (chepai == "") {alert("请输入您的车牌");check = false;} else {check = true;}
return check;
}
function checktel() {
var check = false;
var tel = document.getElementById("tel").value;
if (tel == "") {alert("请输入您的电话");check = false;} else {check = true;}
return check;
}
function checkfile1() {
var check = false;
var file1 = document.getElementById("file1").value;
if (file1 == "") {alert("请选择图片");check = false;} else {check = true;}
return check;
}
function check() {
var check = checkname() && checkchepai() && checktel() && checkfile1();
return check;
}
</script>
</head>
<body>
<form enctype="multipart/form-data" name="myform" onSubmit="return check()" method="post" action="3gindex_up1.php">
<input type="text" name="name" id="name" style="width:40%;height:30px;" />
<input type="text" name="chepai" id="chepai" />
<input type="text" name="tel" id="tel" />
<input type="file" name="file1" id="file1" accept="image/*"/>
<input type="submit" value="完成 我要上传""/>
</form>
</body>
</html>
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>试验田</title>
<script type="text/javascript">
function checkname() {
var check = false;
var name = document.getElementById("name").value;
if (name == "") {alert("请输入您的姓名");check = false;} else {check = true;}
return check;
}
function checkchepai() {
var check = false;
var chepai = document.getElementById("chepai").value;
if (chepai == "") {alert("请输入您的车牌");check = false;} else {check = true;}
return check;
}
function checktel() {
var check = false;
var tel = document.getElementById("tel").value;
if (tel == "") {alert("请输入您的电话");check = false;} else {check = true;}
return check;
}
function checkfile1() {
var check = false;
var file1 = document.getElementById("file1").value;
if (file1 == "") {alert("请选择图片");check = false;} else {check = true;}
return check;
}
function check() {
var check = checkname() && checkchepai() && checktel() && checkfile1();
return check;
}
</script>
</head>
<body>
<form enctype="multipart/form-data" name="myform" onSubmit="return check()" method="post" action="3gindex_up1.php">
<input type="text" name="name" id="name" style="width:40%;height:30px;" />
<input type="text" name="chepai" id="chepai" />
<input type="text" name="tel" id="tel" />
<input type="file" name="file1" id="file1" accept="image/*"/>
<input type="submit" value="完成 我要上传""/>
</form>
</body>
</html>
...全文
请发表友善的回复…
发表回复
qq_34652764 2017-04-01
- 打赏
- 举报
function setFile($file){
#coding
}
当作看不见 2016-12-14
- 打赏
- 举报
http://www.jb51.net/article/60821.htm
pcm5800 2016-12-14
- 打赏
- 举报
我已经用accept限制了类型了 我现在是想用户选取图片后 读取图片信息， 如果格式或容量不对，就弹框提示，JS可以实现吗
后端PHP可以实现但是必须等表单提交上传以后才能判断，因为是移动端页面，上传时间长，用户体验不理想。
当作看不见 2016-12-14
- 打赏
- 举报
input 的 accept属性可以限制类型，但是用户一样可以选择其他类型，只能帮助筛选而已。
