不会发送ajax请求* input[type = file] 使用的是onchange去做
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input_file验证</title> </head> <body> <input type="file"> <script> var upload = document.getElementById(‘upload-file‘); upload.addEventListener(‘change‘,changeHandler); function changeHandler(){ fileValid(this, 2048, ‘image‘, function () { /* * 用input——file上传文件，，失用onchange要领时，多次上传同一个文件时成果掉效，不会发送ajax请求 * input[type = file] 使用的是onchange去做，onchange监听的为input的value值， * 只有再内容产生转变的时候去触发，而value在上传文件的时候生存的是文件的内容， * 你只需要在上传告成的回调里面，将当前input的value值置空即可 * 设为空之后在次点击就可实现同一文件多次上传操纵 * */ upload.value = ‘‘; }); } /** * 验证上传文件巨细和类型 * @param {this} value_ [获取input东西，一般为this] * @param {[number]} size_ [文件限制的巨细，单位为kb] * @param {[string]} type_ [文件类型，当前撑持image和office] * @param {[function]} callback [验证通过的回调] */ function fileValid (value_, size_, type_, callback) { var file = value_.files[0]; var fileSize = (file.size / 1024).toFixed(0) var fileType = value_.value.substring(value_.value.lastIndexOf(".")); if (fileSize > size_) { alert(‘文件过大‘); return false } switch (type_) { case ‘image‘: if (!fileType.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) { alert(‘请上传图片‘) return false; } break; case ‘office‘: if (!fileType.match(/.doc|.docx|.xls|.xlsx|.ppt|.pptx/i)) { alert(‘请上传word、excel或ppt文件‘) return false; } break; default: console.error(‘type_参数设置不正确！‘) return false; break; } callback() } </script> </body> </html>
H5 input file上传图片验证
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/33089.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")