一、读取文本文件内容,指定字符编码
<div class="container"> <!--文本文件验证--> <input type="file" id="file" multiple accept="text/plain" /> <input type="button" id="btn1" value="读取文件内容" onclick="showFiles();" /> <h4>选择文件如下:</h4> <blockquote></blockquote> </div>
js:
//读取文本文件实例 var fileBox = document.getElementById(‘file‘); function showFiles() { //获取选择文件的数组 var fileList = fileBox.files; for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; readFile(file); } } //读取文件内容 function readFile(file) { var reader = new FileReader(); //中文windows系统 txt 文本多数默认编码 gbk reader.readAsText(file, ‘gbk‘); reader.onload = function (e) { var result = reader.result; $(‘.container blockquote‘).text(result); } }
二、读取或预览客户图片
<div class="container"> <!--图片类型验证方法1--> <input type="file" id="file" multiple accept="image/*" /> <input type="button" id="btn1" value="选择上传文件" onclick="showFiles();" /> <h4>选择文件如下:</h4> <img src="" id="img1" /> </div>
JS:
//读取图片实例 var fileBox = document.getElementById(‘file‘); function showFiles() { //获取选择文件的数组 var fileList = fileBox.files; for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; //图片类型验证第二种方式 if (/image\/\w+/.test(file.type)) readFile(file); else console.log(file.name + ‘:不是图片‘); } } //读取图片内容 为DataURL //reader.readAsDataURL function readFile(file) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { var result = reader.result; $(‘.container blockquote‘).text(result); $(‘#img1‘).attr(‘src‘, result) } }
简单实例一:http://www.cnblogs.com/tianma3798/p/4355949.html
时间: 2024-08-06 03:45:41