上传文件是工作中常用的功能,不同的场景对不同的文件类型和文件大小都有不同的要求:
<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判断文件类型大小并给出提示
原文地址:http://www.cnblogs.com/jiangwz/p/7978047.html