上传文件预览的简短实例,JavaScript代码达成txt文

2019-07-07 04:41 来源:未知

1. FILE API

明天做项目刚刚超越那几个记录一下。因为是粗略的txt文件,只关乎文本,假若供给涉及图片预览就必要使用papaparse和jschardet,此处相当少汇报。

在HTML表单中,能够上传文件的独一控件正是<input type="file">。

html5提供了FIle和File里德r三个办法,能够读取文件消息并读取文件。

 表单按键使用js的onchange=”uploadfile()”事件,function函数代码如下所示:

留神:当二个表单包罗<input type="file">时,表单的enctype必须钦赐为multipart/form-data,method必须钦赐为post,浏览器工夫科学编码并以multipart/form-data格式发送表单的数据。

2. example

//此处为txt文件上传预览的js代码
function uploadfile(){
 var file=$("#txt")[0].files[0];
 //判断上传文件是不是txt格式,判断后缀是不是.txt
 if(file.name.substr(-4).toLocaleLowerCase() != '.txt'){
  alert("请上传格式为txt的文件!");
  windows.location="test.jsp";//重新定位到上传txt文件页面
 }
 else//如果上传文件是txt文件,则显示文件的预览
 {
  var reader=new FileReader;
  reader.readAsText(file,'gb2312');
  //reader.readAsDataURL(file);
  reader.onload=function(evt){
   var data=evt.target.result;  
   $('#textarea_id').val(data); 
  } 
 } 
}

出于安全思念,浏览器只允许用户点击<input type="file">来抉择当三步跳件,用JavaScript对<input type="file">的value赋值是从未有过其他功效的。当用户挑选了上传有些文件后,JavaScript也爱莫能助获得该文件的实在路线:

<html>
<body>
<div id="test-image-preview" 
style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center center;"> </div>
<br/>
<div id="test-file-info"></div>
<br/>
<input type="file" id="test-image-file">
<script type="text/javascript">

var
  fileInput = document.getElementById('test-image-file'),
  info = document.getElementById('test-file-info'),
  preview = document.getElementById('test-image-preview');
// 监听change事件:
fileInput.addEventListener('change', function () {
  // 清除背景图片:
  preview.style.backgroundImage = '';
  // 检查文件是否选择:
  if (!fileInput.value) {
    info.innerHTML = '没有选择文件';
    return;
  }
  // 获取File引用:
  var file = fileInput.files[0];
  // 获取File信息:
  info.innerHTML = '文件: '   file.name   '<br>'  
           '大小: '   file.size   '<br>'  
           '修改: '   file.lastModifiedDate;
  if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
    alert('不是有效的图片文件!');
    return;
  }
  // 读取文件:
  var reader = new FileReader();
  reader.onload = function(e) {
    var
      data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'      
    preview.style.backgroundImage = 'url('   data   ')';
  };
  // 以DataURL的形式读取文件:
  reader.readAsDataURL(file);
});
</script>

</body>
</html>

作用如下:

常见,上传的文件都由后台服务器处理,JavaScript能够在付出表单时对文件扩充名做检查,以便防止用户上传无效格式的文书:

以DataULANDL的方式读取到的文件是三个字符串,类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...,

韦德娱乐1946网页版 1
韦德娱乐1946网页版 2
韦德娱乐1946网页版 3

var f = document.getElementById('test-file-upload');
var filename = f.value; // 'C:fakepathtest.png'
if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
  alert('Can only upload image file.');
  return false;
}

常用来安装图像。借使要求服务器端管理,把字符串base64,前面包车型客车字符发送给服务器并用Base64解码就足以获取原始文本的二进制内容。

晋升上传文件类型错误

File API

3. 解释

补充:

由于JavaScript对用户上传的文书操作十一分有限,特别是无力回天读取文件内容,使得众多亟需操作文件的网页不得不用Flash那样的第三方插件来落到实处。

地点的代码还演示了JavaScript的贰个最主要的风味正是单线程推行形式。在JavaScript中,浏览器的JavaScript试行引擎在进行JavaScript代码时,总是以单线程方式实施,也正是说,任哪天候,JavaScript代码都不容许还要有多于1个线程在实践。

js 上传文件预览

趁着HTML5的广泛,新扩张的File API允许JavaScript读取文件内容,得到越来越多的文书消息。

您恐怕会问,单线程情势施行的JavaScript,怎么样管理多职务?

1. FILE API

HTML5的File API提供了File和FileReader五个关键对象,能够博得文件消息并读取文件。

在JavaScript中,实践多任务实际上都是异步调用,比方上面包车型地铁代码:

   html5提供了FIle和FileReader七个格局,能够读取文件消息并读取文件。

上边包车型大巴例子演示了什么读取用户采纳的图样文件,并在八个<div>中预览图像:

reader.readAsDataURL(file);

2. example

var
  fileInput = document.getElementById('test-image-file'),
  info = document.getElementById('test-file-info'),
  preview = document.getElementById('test-image-preview');
// 监听change事件:
fileInput.addEventListener('change', function () {
  // 清除背景图片:
  preview.style.backgroundImage = '';
  // 检查文件是否选择:
  if (!fileInput.value) {
    info.innerHTML = '没有选择文件';
    return;
  }
  // 获取File引用:
  var file = fileInput.files[0];
  // 获取File信息:
  info.innerHTML = '文件: '   file.name   '<br>'  
           '大小: '   file.size   '<br>'  
           '修改: '   file.lastModifiedDate;
  if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
    alert('不是有效的图片文件!');
    return;
  }
  // 读取文件:
  var reader = new FileReader();
  reader.onload = function(e) {
    var
      data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'      
    preview.style.backgroundImage = 'url('   data   ')';
  };
  // 以DataURL的形式读取文件:
  reader.readAsDataURL(file);
});

就能发起一个异步操作来读取文件内容。因为是异步操作,所以大家在JavaScript代码中就不精通如什么日期候操作甘休,因而必要先安装四个回调函数:

<html>
<body>
<div id="test-image-preview" 
style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center center;"> </div>
<br/>
<div id="test-file-info"></div>
<br/>
<input type="file" id="test-image-file">
<script type="text/javascript">
var
 fileInput = document.getElementById('test-image-file'),
 info = document.getElementById('test-file-info'),
 preview = document.getElementById('test-image-preview');
// 监听change事件:
fileInput.addEventListener('change', function () {
 // 清除背景图片:
 preview.style.backgroundImage = '';
 // 检查文件是否选择:
 if (!fileInput.value) {
  info.innerHTML = '没有选择文件';
  return;
 }
 // 获取File引用:
 var file = fileInput.files[0];
 // 获取File信息:
 info.innerHTML = '文件: '   file.name   '<br>'  
      '大小: '   file.size   '<br>'  
      '修改: '   file.lastModifiedDate;
 if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
  alert('不是有效的图片文件!');
  return;
 }
 // 读取文件:
 var reader = new FileReader();
 reader.onload = function(e) {
  var
   data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'   
  preview.style.backgroundImage = 'url('   data   ')';
 };
 // 以DataURL的形式读取文件:
 reader.readAsDataURL(file);
});
</script>
</body>
</html>

地方的代码演示了什么通过HTML5的File API读取文件内容。以DataU大切诺基L的款式读取到的公文是贰个字符串,类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...,常用来安装图像。假如急需服务器端管理,把字符串base64,前边的字符发送给服务器并用Base64解码就可以拿走原始文本的二进制内容。

reader.onload = function(e) {
  // 当文件读取完成后,自动调用此函数:
};

  以DataU途锐L的格局读取到的文书是三个字符串,类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...,

回调

当文件读取完毕后,JavaScript引擎将机关调用大家设置的回调函数。施行回调函数时,文件已经读取完成,所以大家得以在回调函数内部安全地获得文件内容。

常用于安装图像。纵然急需劳务器端管理,把字符串base64,前边的字符发送给服务器并用Base64解码就足以赢得原始文件的二进制内容。

地点的代码还身体力行了JavaScript的一个至关心注重要的性状就是单线程施行方式。在JavaScript中,浏览器的JavaScript施行引擎在实行JavaScript代码时,总是以单线程情势实践,约等于说,任哪一天候,JavaScript代码都不容许同有时间有多于1个线程在实践。
你大概会问,单线程格局举办的JavaScript,怎么样管理多职务?

如上那篇js 上传文件预览的差不离实例就是小编分享给大家的全体内容了,希望能给我们贰个参阅,也指望我们多多帮衬脚本之家。

3. 解释

在JavaScript中,执行多职务实际上都以异步调用,比方上面包车型大巴代码:

您或然感兴趣的文章:

  • js HTML5多图片上传及预览实例解析(不含前端的文件分割)
  • JavaScript File API达成文件上传预览
  • JavaScript File API文件上传预览
  • jsp中点击图片弹出文件上传界面及预览作用的落实
  • js前端实现多图图片上传预览的两个措施(推荐)
  • PHP仿微信多图片预览上传实例代码
  • 根据HTML5的可预览多图片Ajax上传
  • 用file标签完毕多图文件上传预览

上面的代码还亲自去做了JavaScript的两个首要的特性正是单线程试行形式。在JavaScript中,浏览器的JavaScript推行引擎在实行JavaScript代码时,总是以单线程形式实施,也便是说,任几时候,JavaScript代码都不容许同时有多于1个线程在实施。

reader.readAsDataURL(file);

你大概会问,单线程情势实行的JavaScript,怎么着管理多任务?

就能够倡导三个异步操作来读取文件内容。因为是异步操作,所以大家在JavaScript代码中就不清楚怎么时候操作甘休,由此必要先安装贰个回调函数:

在JavaScript中,施行多职务实际上都以异步调用,比方上面的代码:

reader.onload = function(e) {
  // 当文件读取完成后,自动调用此函数:
};

reader.readAsDataURL(file);

当文件读取达成后,JavaScript引擎将活动调用大家设置的回调函数。实行回调函数时,文件已经读取完结,所以大家能够在回调函数内部安全地获得文件内容。

就能发起三个异步操作来读取文件内容。因为是异步操作,所以我们在JavaScript代码中就不知道怎么着时候操作甘休,因而需求先安装叁个回调函数:

你大概感兴趣的篇章:

  • javascript 操作文件 完结方式小结
reader.onload = function(e) {
 // 当文件读取完成后,自动调用此函数:
};

当文件读取完毕后,JavaScript引擎将自行调用咱们设置的回调函数。实行回调函数时,文件已经读取达成,所以大家能够在回调函数内部安全地获得文件内容。

总结

如上所述是作者给我们介绍的JavaScript代码完成txt文件的上传预览功效,希望对我们享有辅助,假若大家有别的疑问请给笔者留言,作者会及时还原大家的。在此也特别感激大家对台本之家网址的辅助!

您或然感兴趣的稿子:

  • JS HTML5 FileReader达成文件上传前本地预览成效
  • jsp中式点心击图片弹出文件上传分界面及完成预览实例详解
  • JavaScript File API达成文件上传预览
  • JavaScript File API文件上传预览
  • jsp中式点心击图片弹出文件上传分界面及预览功效的兑现
TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:上传文件预览的简短实例,JavaScript代码达成txt文