关于html选择文件(input指定类型js判断)

最新推荐文章于 2021-06-15 13:59:27 发布

aswind7

最新推荐文章于 2021-06-15 13:59:27 发布

阅读量3.3k

点赞数 2

分类专栏：原生js

本文链接：https://blog.csdn.net/sqfbeijing/article/details/46942247

版权

原生js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

第一个例子：点击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" οnclick="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" οnchange="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" οnchange="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' οnchange=\"test(this,'txt');\" >";
}
}
</script>
</body>
</html>

第四种：巧用input的accept属性

<!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" οnchange="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

aswind7

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于html选择文件(input指定类型js判断)

第一个例子：点击button后才能判断类型无标题文档 function check(){ if (/.*\.txt$/.test(document.getElementById("input-file").value)) { ; } else { alert('请选择txt文件!') } } 第二种：oncha
复制链接

扫一扫

专栏目录