关于html选择文件(input指定类型js判断)
来源:互联网 发布:sql注入 预处理 编辑:程序博客网 时间:2024/06/05 04:11
第一个例子: 点击button后才能判断类型
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><input type='file' id="input-file"><input type="button" onclick="check()"><script>function check(){if (/.*\.txt$/.test(document.getElementById("input-file").value)) {;} else {alert('请选择txt文件!')}}</script></body></html><span style="white-space:pre"></span>
第二种:onchange判断
<pre name="code" class="html"><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><input type="file" id="file1" onchange="change(this)"/><script> function change(o) {//o.value就是你选择的文件的完整路径,然后你可以自己过滤 if (o.value.indexOf('.txt') > -1) { alert('yes') } else { alert("no") } //code } </script></body></html>
第三种:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" onchange="test(this,'txt');">
<script>
function test(obj,filter){
var file = obj.value.match(/[^\/\\]+$/gi)[0];
var rx = new RegExp('\\.(' + (filter?filter:'') + ')$','gi');
if(filter&&file&&!file.match(rx)){
alert("只能选择txt");
//重新构建input file
document.body.innerHTML = "<input type='file' onchange=\"test(this,'txt');\" >";
}
}
</script>
</body>
</html>
<!DOCTYPE html><html><body><form action="demo_form.asp"> <input type="file" name="pic" accept="image/*"> <input type="submit"></form><p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 input 标签的 accept 属性。</p><p><strong>注释:</strong>鉴于安全考虑,该例不允许您上传文件。</p></body></html>
第五种:判断txt文件,并显示!
<!DOCTYPE html><html><head><span style="white-space:pre"></span><style> #byte_content { margin: 5px 0; max-height: 100px; overflow-y: auto; overflow-x: hidden; } #byte_range { margin-top: 5px; }</style></head><body><input type="file" id="files" name="file" onchange="change(this)" accept="text/plain"/> Read bytes: <span class="readBytesButtons"> <button data-startbyte="0" data-endbyte="4">1-5</button> <button data-startbyte="5" data-endbyte="14">6-15</button> <button data-startbyte="6" data-endbyte="7">7-8</button> <button>entire file</button></span><div id="byte_range"></div><div id="byte_content"></div><script> function readBlob(opt_startByte, opt_stopByte) { var files = document.getElementById('files').files; if (!files.length) { alert('Please select a file!'); return; } var file = files[0]; var start = parseInt(opt_startByte) || 0; var stop = parseInt(opt_stopByte) || file.size - 1; var reader = new FileReader(); // If we use onloadend, we need to check the readyState. reader.onloadend = function(evt) { if (evt.target.readyState == FileReader.DONE) { // DONE == 2 document.getElementById('byte_content').textContent = evt.target.result; document.getElementById('byte_range').textContent = ['Read bytes: ', start + 1, ' - ', stop + 1, ' of ', file.size, ' byte file'].join(''); } }; var blob = file.slice(start, stop + 1); reader.readAsBinaryString(blob); } document.querySelector('.readBytesButtons').addEventListener('click', function(evt) { if (evt.target.tagName.toLowerCase() == 'button') { var startByte = evt.target.getAttribute('data-startbyte'); var endByte = evt.target.getAttribute('data-endbyte'); readBlob(startByte, endByte); } }, false);</script></body></html>
一些参考链接: 国外的: http://www.html5rocks.com/en/tutorials/file/dndfiles/
<span style="white-space:pre"></span>巧用input的accept属性: http://blog.csdn.net/wclxyn/article/details/7090575
0 0
- 关于html选择文件(input指定类型js判断)
- input上传指定类型的文件
- Jquery判断input是否选择好了文件
- html文件选择器,选择类型
- input type="file" 在js中判断文件上传类型
- html input标签text类型的选择框
- js判断文件上传类型
- JS判断input输入类型是否为整数
- JS判断input输入类型是否为整数,浮点数
- 将HTML input file的文件选择路径清空
- HTML input type=file文件选择表单元素 小结
- HTML input type=file文件选择表单元素二三事
- 不用点击file类型的input弹出文件选择对话框
- input标签file类型,选择多个文件进行上传
- input标签file类型,选择多个文件进行上传
- input标签file类型,选择多个文件进行上传
- input标签file类型,选择多个文件进行上传
- input标签file类型,选择多个文件进行上传
- 【Maven】Maven解决Maven Repository 没有
- (算法入门)基本图论-深度优先搜索之JAVA实现
- 引用计数
- Java子类继承(二):隐藏成员变量和方法重写的理解
- python RSA签名和解签
- 关于html选择文件(input指定类型js判断)
- 黑马程序员_反射
- 向量投影
- 找出数组中的最大值和次大值
- 链接错误:error LNK 2019 :Unresolved external symbol
- 利用Verilog HDL实现万年历
- ArcGIS for Server的安装及站点中的集群配置
- AIDL介绍和实例讲解
- 360doc-----简单CXF方式的webService客户端调用范例