js input file文件上传图片并展示

JavaScript018

js input file文件上传图片并展示,第1张

​​​​​​

    1 页面HTML内容

    2 获取input[file]元素    

    3 对获取的file元素操作,也就是操作fileReader属性    

1:Blob

2:  File

3:  FileList

4:  FileReader

FileList :

这里,默认状态下选择文件 每次files属性上FileList对象里只有一个file文件。

file对象中包含了name 文件名size type 文件类型lastModified 最后修改时间;

FileReader:异步读取本地文件内容;包括File 和Blob ;

    创建FileReader对象读取file文件

关于fileReader的几个属性:

FileReader.error 只读一个 DOMException 代表在读取文件中出现的错误。 FileReader.readyState 只读一个数字表明的状态FileReader。这是以下之一:

FileReader.result 只读文件的内容。该属性仅在读取操作完成后才有效,并且数据的格式取决于使用哪种方法来启动读取操作。

fileReader的几个事件处理程序:

1 . FileReader.onbort:在读取操作中止时触发。

2 . FileReader.onerror:在读取操作遇到错误时触发。

3 . FileReader.onload:在读取操作成功完成时触发。

4 . FileReader.onloadstart:在开始阅读时触发。

5 . FileReader.onloadend:无论是否成功 只要读取操作完成都会触发。

6 . FileReader.onprogress:阅读Blob内容时触发。

FileReader的方法:

1 . FileReader.abort()中止读取操作

2 . FileReader.readAsArrayBuffer()完成时result属性包含ArrayBuffer表示文件数据

3 . FileReader.readAsBinaryString()完成时result属性将包含来自文件的原始二进制数据作为字符串。

4 . FileReader.readAsDataURL()完成时result属性包含data:表示文本数据的URL;

5 . FileReader.readAsText()完成时result属性包含文本的内容作为文本字符串。

Js获取当前日期时间及其它操作

var myDate = new Date()

myDate.getYear() //获取当前年份(2位)

myDate.getFullYear() //获取完整的年份(4位,1970-????)

myDate.getMonth() //获取当前月份(0-11,0代表1月)

myDate.getDate() //获取当前日(1-31)

myDate.getDay()//获取当前星期X(0-6,0代表星期天)

myDate.getTime() //获取当前时间(从1970.1.1开始的毫秒数)

myDate.getHours() //获取当前小时数(0-23)

myDate.getMinutes()//获取当前分钟数(0-59)

myDate.getSeconds()//获取当前秒数(0-59)

myDate.getMilliseconds() //获取当前毫秒数(0-999)

myDate.toLocaleDateString()//获取当前日期

var mytime=myDate.toLocaleTimeString()//获取当前时间

myDate.toLocaleString( ) //获取日期与时间

日期时间脚本库方法列表

Date.prototype.isLeapYear 判断闰年

Date.prototype.Format 日期格式化

Date.prototype.DateAdd 日期计算

Date.prototype.DateDiff 比较日期差

Date.prototype.toString 日期转字符串

Date.prototype.toArray 日期分割为数组

Date.prototype.DatePart 取日期的部分信息

Date.prototype.MaxDayOfDate 取日期所在月的最大天数

Date.prototype.WeekNumOfYear 判断日期所在年的第几周

StringToDate 字符串转日期型

IsValidDate 验证日期有效性

CheckDateTime 完整日期时间检查

daysBetween 日期天数差

js代码:

//---------------------------------------------------

// 判断闰年

//---------------------------------------------------

Date.prototype.isLeapYear = function()

{

return (0==this.getYear()%4&&((this.getYear()%100!=0)||(this.getYear()%400==0)))

}

//---------------------------------------------------

// 日期格式化

// 格式 YYYY/yyyy/YY/yy 表示年份

// MM/M 月份

// W/w 星期

// dd/DD/d/D 日期

// hh/HH/h/H 时间

// mm/m 分钟

// ss/SS/s/S 秒

//---------------------------------------------------

上传用本地地址 查看用网络地址

你上传保留的位置在tomcat的项目下。

webapps/文件夹/文件

然后访问的时候用

http://ip:端口/项目名/文件夹/文件

src填这个就行了