在js中如何实现判断文件类型大小

上传文件是工作中常用的功能，不同的场景对不同的文件类型和文件大小都有不同的要求：

<form id="uploadForm" method="post" class="layui-form">
 <p class="layui-form-item">
 <label class="layui-form-label">名称</label>
 <p class="layui-input-block">
 <input type="text" name="name" required lay-verify="required"
 placeholder="请输入文件名" autocomplete="off" class="layui-input">
 </p>
 </p>
 <p class="layui-form-item">
 <label class="layui-form-label">资料类型:</label>
 <p class="layui-input-block">
 <select name="datatypeid" id="datatypeid"></select>
 </p>
 <input type="hidden" id="yincang">
 </p>
 <p class="layui-form-item">
 <label class="layui-form-label">上传文件</label>
 <p class="layui-input-block">
 <input class="layui-input" type="file" name="file" onchange="fileChange(this);"/>
 </p>
 </p>
 <p class="layui-form-item">
 <p class="layui-input-block">
 <input type="button" class="layui-btn" value="上传"
 onclick="upload()" />
 </p>
 </p>
 </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>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在JavaScript中如何判断NaN

如何使用jQuery实现鼠标响应式透明度渐变动画效果

在jQuery中如何实现鼠标响应式淘宝动画效果