操作文件 -------JavaScrip
本文摘要:http://www.liaoxuefeng.com/
在HTML表单中,可以上传文件的唯一控件就是<input type="file">
。
注意:当一个表单包含<input type="file">
时,表单的enctype
必须指定为multipart/form-data
,method
必须指定为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提供了File
和FileReader
两个主要对象,可以获得文件信息并读取文件。
关于 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
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=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
变成DONE
,loadend
被触发。此时,该result
属性包含 the data as a
表示文件数据的URL作为base64编码字符串。
上面的代码演示了如何通过HTML5的File API读取文件内容。以DataURL的形式读取到的文件是一个字符串,类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...
,常用于设置图像。如果需要服务器端处理,把字符串base64,
后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。
操作文件 -------JavaScrip的更多相关文章
- 虚拟机出现“操作文件.PhysicalDrive1失败”的解决方法
今天打算利用U盘给虚拟机装系统做实验,中途遇到了"操作文件.PhysicalDrive1失败"的错误,试了网上的方法都没有成功,最后自己试了很久总算弄出来了.鉴于本人的基础水平有限 ...
- 【Python】[IO编程]文件读写,StringIO和BytesIO,操作文件和目录,序列化
IO在计算机中指Input/Output,也就是输入和输出. 1.文件读写,1,读文件[使用Python内置函数,open,传入文件名标示符] >>> f = open('/User ...
- python基础知识---操作文件
一.打开文件 open()函数 open函数返回一个文件对象. 用法:open('文件名','模式') 打开文件的模式有: r,只读模式(默认). w,只写模式.[不可读:不存在则创建:存在则删除内 ...
- 操作文件方法简单总结(File,Directory,StreamReader,StreamWrite )
对于文件夹,文档的操作一直处于一知半解状态,有时间闲下来了,好好练习了一把,对文档,文件的操作有了一个基本的认知, 若要深入了解,还是得通过实际的项目才行了,好了废话不多说,上酸菜!! 注:红色标题为 ...
- C#操作文件夹及文件的方法的使用
本文收集了目前最为常用的C#经典操作文件的方法,具体内容如下:C#追加.拷贝.删除.移动文件.创建目录.递归删除文件夹及文件.指定文件夹下面的所有内容copy到目标文件夹下面.指定文件夹下面的所有内容 ...
- python读写操作文件
with open(xxx,'r,coding='utf-8') as f: #打开文件赋值给F ,并且执行完了之后不需要 f.close(). 在Python 2.7 及以后,with又支持同时 ...
- javaScript中利用ActiveXObject来创建FileSystemObject操作文件
注:如果用javascript读本地文件,遇到安全问题. 需在浏览器中进行设置,如下: 工具—> Internet选项->安全->自定义级别->启用“没有标识为安全的A ...
- Python操作文件、文件夹、字符串
Python 字符串操作 去空格及特殊符号 s.strip().lstrip().rstrip(',') 复制字符串 #strcpy(sStr1,sStr2) sStr1 = 'strcpy' sSt ...
- golang操作文件的四种方法
golang追加内容到文件末尾 字数349 阅读54 评论0 喜欢2 golang读写文件,网上很多教程了但是今天有个需求,想要把内容追加写到文件末尾google了好久,没有查到研究了一会儿file库 ...
随机推荐
- win10移动热点问题
1.问题(win10移动热点相关) 具体描述: win10通过网线连接上网,打开移动热点后手机无法连接. 如下图所示,win10打开热,然后进入设置界面设置wlan名称和密码,手机填好密码,连接热点发 ...
- MarkDown折叠语法
1.语法代码 程序员的本质 程序的进阶和优化 1.简化人的操作,更少的代码做更多的事情 2.节省时间效率,在更短的时间内做更多的事情 3.占用内存,占更少的内存做更多的事情 <details&g ...
- Flask&&人工智能AI --3
一.flask中的CBV 对比django中的CBV,我们来看一下flask中的CBV怎么实现? from flask import Flask, render_template, url_for, ...
- 如何自动更新SVN项目
在桌面新建“SVN Update.bat”文件,把下面的命令复制到该文件中,保存并退出,然后使用windows的“任务计划”功能,就可以实现定时自动更新SVN目录. 按此批处理文件的方法执行,一次可自 ...
- JS——jquery UI
1. draggable() 滑动条demo: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Murano PL
To develop applications, murano project refers to Murano Programming Language (MuranoPL). It is repr ...
- (转)深入浅出linux系统umask值及其对应的文件权限讲解
浅出linux系统umask值及其对应的文件权限讲解 原文:http://blog.51cto.com/oldboy/1060032 缘起:1.此文的撰写特别为感谢51cto的博客工作人员和领导,老男 ...
- JAVA 集合类小结
一 集合和数组 因为本人也是个go的爱好者,所以对于集合类算是摸的比较透的. 说到集合,必须了解数组和集合. Java的数组长度固定,集合长度不定.集合是特定的数据结构的集合. 而go里面并没有集合, ...
- java+elipse安装及部分问题
1. elipse下载.安装.jdk环境配置教程: https://www.cnblogs.com/ForestDeer/p/6647402.html 2.eclipse使用教程: https://j ...
- hibernate课程 初探单表映射1-2 ORM定义
1 什么是ORM? ORM(Object / RelationShip Mapping) 对象/关系映射 面向对象编程(OOP)最终要把对象信息保存在关系性数据库中,要写好多sql语句.这与面向对象编 ...