上传文件是工作中常用的功能，不同的场景对不同的文件类型和文件大小都有不同的要求：
<form id="uploadForm" method="post" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" name="name" required lay-verify="required"
placeholder="请输入文件名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">资料类型:</label>
<div class="layui-input-block">
<select name="datatypeid" id="datatypeid"></select>
</div>
<input type="hidden" id="yincang">
</div>
<div class="layui-form-item">
<label class="layui-form-label">上传文件</label>
<div class="layui-input-block">
<input class="layui-input" type="file" name="file" onchange="fileChange(this);"/>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="button" class="layui-btn" value="上传"
onclick="upload()" />
</div>
</div>
</form>
js方法：
<script type="text/javascript">
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
function fileChange(target, id) {
var fileSize = 0;
var filetypes = [ ".doc", ".docx" ];//这里设置接受的文件类型
var filepath = target.value;
var filemaxsize = 1024 * 10;//接受的文件最大10M
if (filepath) {
var isnext = false;
var fileend = filepath.substring(filepath.indexOf("."));
if (filetypes && filetypes.length > 0) {
for (var i = 0; i < filetypes.length; i++) {
if (filetypes[i] == fileend) {
isnext = true;
break;
}
}
}
if (!isnext) {
alert("不接受此文件类型！");
target.value = "";
return false;
}
} else {
return false;
}
if (isIE && !target.files) {
var filePath = target.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
if (!fileSystem.FileExists(filePath)) {
alert("附件不存在，请重新输入！");
return false;
}
var file = fileSystem.GetFile(filePath);
fileSize = file.Size;
} else {
fileSize = target.files[0].size;
}
var size = fileSize / 1024;
if (size > filemaxsize) {
alert("附件大小不能大于" + filemaxsize / 1024 + "M！");
target.value = "";
return false;
}
if (size <= 0) {
alert("附件大小不能为0M！");
target.value = "";
return false;
}
}
</script>
以上这篇js判断文件类型大小并给出提示的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持天达云。