操作文件 -------JavaScrip

本文摘要:http://www.liaoxuefeng.com/

在HTML表单中,可以上传文件的唯一控件就是<input type="file">

注意:当一个表单包含<input type="file">时,表单的enctype必须指定为multipart/form-datamethod必须指定为post,浏览器才能正确编码并以multipart/form-data格式发送表单的数据。

出于安全考虑,浏览器只允许用户点击<input type="file">来选择本地文件,用JavaScript对<input type="file">value赋值是没有任何效果的。当用户选择了上传某个文件后,JavaScript也无法获得该文件的真实路径:

  //当设置了Enctype为multipart/form-data 可以传多格式的,不仅限于图片
<form id="form1" runat="server" enctype="multipart/form-data" method="post" action="表格提交的去向"> //要在后台得到数据,这里的action需要给个页面或一般处理程序<input id="File1" type="file" name="File1" /> //如果需要在后台获取信息,这边的标签必须带name属性,后台的Form["XX"]才会有值<input id="Button1" type="button" value="button" /> //这里的type类型改成Submit才能触发表单提交<script src="../js/jquery-1.11.0.min.js"></script><script>'use strict';$("#Button1").click(function () {var filename = document.getElementById("File1").value; //这只是个路径,而且不是真实的
//对文件内类进行过滤
if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {alert('Can only upload image file.');return false;}})</script></form>

   我们上传一般只能一个路径,需要文件信息,我们一般在后台去做。

 

 

File API         可以在前台就直接获取文件信息,不用在去后台获取

由于JavaScript对用户上传的文件操作非常有限,尤其是无法读取文件内容,使得很多需要操作文件的网页不得不用Flash这样的第三方插件来实现。

随着HTML5的普及,新增的File API允许JavaScript读取文件内容,获得更多的文件信息。

HTML5的File API提供了FileFileReader两个主要对象,可以获得文件信息并读取文件。

关于 FIle和FileReader的了解 参考 https://developer.mozilla.org/en-US/docs/Web/API/File

  <input id="File1" type="file" /> <div><img  id="im" style="width:100px;height:200px" /></div><div id="info"></div><script src="../js/jquery-1.11.0.min.js"></script><script>'use strict';var fileInput = document.getElementById("File1");var im = document.getElementById("im");var info = document.getElementById("info");//监听change事件fileInput.addEventListener("change", function () {if (!fileInput.value) {  //非空非零即为真info.innerHTML = "你没有选择文件";return ;  //事件里面遇到return就退出了
                }
//以下代码看不懂先去了解File Api里面的File和FileReader对象
var file = fileInput.files[0];//单个上传,只有一个就是0info.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=reader.result; 这样也可以获取到
var data = e.target.result; //data:image/jpeg;base64,/9j/4AAQSk...(base64编码)... //console.log(data); 这个输出来看了一下好多,也看不懂,而且还把网页卡住了im.src = data;}
//回调 reader.readAsDataURL(file); //用于读取File内容,读取完成后,会触发onload事件 })
</script>

结果:

解释:

 

readAsDataURL方法用于读取指定Blob或的内容File。读取操作完成后,readyState变成DONEloadend被触发。此时,该result属性包含  the data as a 表示文件数据的URL作为base64编码字符串。

上面的代码演示了如何通过HTML5的File API读取文件内容。以DataURL的形式读取到的文件是一个字符串,类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...,常用于设置图像。如果需要服务器端处理,把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容

 

 

转载于:https://www.cnblogs.com/Sea1ee/p/7131955.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/488007.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

半导体未来浪潮(深度好文)

本文资料来源于自德勤报告《半导体&#xff1a;未来浪潮》01新格局&#xff1a;全球半导体行业不断演化在过去几年&#xff0c;全球半导体行业增长主要依赖智能手机等电子设备的需求&#xff0c;以及物联网、云计算等技术应用的扩增。预计全球半导体行业增长态势有望持续至下一…

python数据运算

算数运算&#xff1a; 比较运算&#xff1a; 赋值运算&#xff1a; 逻辑运算&#xff1a; 成员运算&#xff1a; 身份运算&#xff1a; 位运算&#xff1a; 运算符优先级&#xff1a; 转载于:https://www.cnblogs.com/ne-zha/p/7136920.html

mysql单台跨数据库查询_在MySQL中怎样进行跨库查询?

在MySQL中跨库查询主要分为两种情况&#xff0c;一种是同服务的跨库查询&#xff1b;另一种是不同服务的跨库查询&#xff1b;它们进行跨库查询是不同的&#xff0c;下面就具体介绍这两种跨库查询。一、同服务的跨库查询同服务的跨库查询只需要在关联查询的时候带上数据名&…

宇宙膨胀背后的故事(卅三):宇宙之有生于无

本文来自程鹗科学网博客1969年&#xff0c;卡特和霍金的导师、剑桥大学宇宙学家夏玛&#xff08;Dennis Sciama&#xff09;在哥伦比亚大学讲学。在他话语停顿的间隙&#xff0c;有人突然迸出一句&#xff1a;“也许宇宙就是一个真空涨落&#xff08;vacuum fluctuation&#x…

《自然》 脑机接口新突破 人脑信号转文本准确率达97%

来源&#xff1a;网易智能据国外媒体报道&#xff0c;一个由加州大学旧金山分校的研究团队打造的新型人工智能系统可根据人脑信号来生成文本&#xff0c;准确率最高可达97%。亚马逊和谷歌等科技公司打造的虚拟助手相当先进&#xff0c;语音识别能力比起几年前进步惊人&#xff…

mysql 取月份天数_mysql 之 获取指定月份天数和指定月份上月天数

1.语法DAY(LAST_DAY(CONCAT(nc_date,01)))AS cm_day_cnt, -- 当月天数DAY(LAST_DAY(DATE_SUB((CONCAT(nc_date,01)),INTERVAL 1 MONTH))) -- 上月天数2.解析我的nc_date 是 202004&#xff0c;因此要使用concat 连接01 &#xff0c;形成完整的日期LAST_DAY()函数&#xff0c;获…

tomcat各目录(文件)作用

1.bin bin目录主要是用来存放tomcat的命令&#xff0c;主要有两大类&#xff0c;一类是以.sh结尾的&#xff08;linux命令&#xff09;&#xff0c;另一类是以.bat结尾的&#xff08;windows命令&#xff09;。 重要&#xff1a; 很多环境变量的设置都在此处&#xff0c;例如可…

对外星智能的搜索得到了重大的升级

Photo: iStockphotoRadio antenna dishes of the Very Large Array radio telescope near Socorro, New Mexico.来源&#xff1a;IEEE电气电子工程师我们都曾一度怀疑宇宙中其他地方是否存在智慧生命。加州大学伯克利分校&#xff08;University of California Berkeley&#x…

打开脑科学研究的另一扇窗:脑神经化学活体原位电化学分析新技术

来源&#xff1a;brainnews脑科学是目前国际前沿科技的热点研究领域之一&#xff0c;对脑功能的研究有助于理解人类认知、情感等复杂生理过程的本质&#xff0c;以及神经系统疾病的形成和发展规律。脑神经信号的传递以及代谢过程都离不开化学物质的参与&#xff0c;因此&#x…

人工智能下一阶段,为啥要看互联网巨头?

来源&#xff1a;财讯网回顾过去的十余年&#xff0c;人工智能的进步可谓“耀眼”。尤其是从2015年“阿法狗”横空出世之后&#xff0c;人工智能行业的发展速度一骑绝尘。归根结底&#xff0c;是人类在人工智能领域探索50余年&#xff0c;最终才在半导体技术和软件技术的帮助下…

日本科学家:可观测宇宙中,我们可能是唯一的生命

图片来源&#xff1a;Pixabay长期以来&#xff0c;人类一直渴望在宇宙中找到地外生命的痕迹&#xff0c;但一项于今年早些时候发表的研究&#xff0c;给持有此类想法的人泼了一盆冷水。基于“自然发生”学说以及其中的“RNA世界”假说&#xff0c;研究人员认为在可观测宇宙中&a…

go 接口 构造器_Go 中接口值的复制

我一直在思考 Go 语言它是如何工作的。直到最近我才发现 Go 中一切都是基于值的。当我们向函数传递参数、迭代切片、执行类型断言时我们都可以看到这一现象。在这些例子中&#xff0c;这些数据结构所存储的值的拷贝会被返回。当我刚开始学习 Go 的时候&#xff0c;我对于这种实…

【人工智能】人工智能革命与机遇

来源 | 北大AI公开课编辑 | Vincent、Natalie课程导师&#xff1a;雷鸣&#xff0c;天使投资人&#xff0c;百度创始七剑客之一&#xff0c;酷我音乐创始人&#xff0c;北京大学信科人工智能创新中心主任&#xff0c;2000年获得北京大学计算机硕士学位&#xff0c;2005年获得斯…

laravel log 对象_swoole运行模式加速laravel应用的详细介绍(life)

本篇文章给大家带来的内容是关于swoole运行模式加速laravel应用的详细介绍&#xff0c;有一定的参考价值&#xff0c;有需要的朋友可以参考一下&#xff0c;希望对你有所帮助。我的官方群点击此处。一、SwooleSwoole号称重新定义了PHP&#xff0c;它是一个PHP扩展&#xff0c;使…

OVS+DPDK Datapath 包分类技术

本文主体内容译于[DPDK社区文档]&#xff0c;但并没有逐字翻译&#xff0c;在原文的基础上进行了一些调整&#xff0c;增加了对TSS分类器的详细阐述。 1. 概览 本文描述了OVSDPDK中的包分类器(datapath classifier -- aka dpcls)的设计与实现思路。本文的内容主要牵涉到分类器对…

mysql第五章 在线测试_PHP+MySQL来实现在线测试quiz功能

在上一篇文章中&#xff0c;我们介绍了jQuery前端PHP在线测试题效果。这篇文章将结合实例给大家介绍如何使用jQueryPHPMySQL来实现在线测试题&#xff0c;包括动态读取题目&#xff0c;答题完毕后台评分&#xff0c;并返回答题结果。查看演示下载资源&#xff1a;1332次 下载资…

深度揭秘AI换脸原理,为啥最先进分类器也认不出?

文章来源&#xff1a;VentureBeat&#xff0c;arXiv智东西4月20日消息&#xff0c;AI换脸已不是新鲜事&#xff0c;手机应用市场中有多款换脸app&#xff0c;此前也曾曝出有网络IP用明星的面孔伪造色情影片、在大选期间用竞选者的脸制作虚假影像信息等。为了规避Deepfake滥用带…

中美德工业互联网路径比较

转自丨无锡情报所作者丨王喜文&#xff0c;九三学社中央促进技术创新工作委员会委员、九三学社中央科技委委员过去20年&#xff0c;互联网是改变社会、改变商业最重要的技术&#xff1b;如今&#xff0c;随着5G、物联网以及云计算和大数据、区块链、人工智能技术的迅速发展&…

不同浏览器隐藏默认表单样式

各种appearance: none; 转载于:https://www.cnblogs.com/haimingpro/p/7168738.html

jmeter file upload 变量_通达OA上传漏洞之变量覆盖分析

作者&#xff1a;kw0ng开始通达OA上传到包含漏洞分析的文章已经有很多&#xff0c;本文重点分析&#xff0c;文件上传处决定路径信息是否回显的UPLOAD_MODE参数是怎么传递的。代码分析触发文件上传点位于/ispirit/im/upload.php中&#xff0c;服务端在接收文件信息的同时还需要…