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

JavaScript07

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属性包含文本的内容作为文本字符串。

这样设置的:

1、先用form标签创建一个上传的表单。

<form id="form1" name="form1" method="post" action="" enctype="multipart/form-data">

 <p><input type="hidden" name="MAX_FILE_SIZE" value="100000" /></p>

 <p><input name="userfile" id="userfile" type="file" onchange="check()"/></p>

</form>

2、用Javascript设置格式和大小。

<script language="JavaScript" type="text/javascript">  function check()    {var aa=document.getElementById("userfile").value.toLowerCase().split('.')//以“.”分隔上传文件字符串   // var aa=document.form1.userfile.value.toLowerCase().split('.')//以“.”分隔上传文件字符串           if(document.form1.userfile.value=="")    {        alert('图片不能为空!')        return false    }    else    {    if(aa[aa.length-1]=='gif'||aa[aa.length-1]=='jpg'||aa[aa.length-1]=='bmp'

||aa[aa.length-1]=='png'||aa[aa.length-1]=='jpeg')//判断图片格式    {var imagSize =  document.getElementById("userfile").files[0].sizealert("图片大小:"+imagSize+"B")if(imagSize<1024*1024*1)        alert("图片大小在1M以内,为:"+imagSize/(1024*1024)+"M")        return true    }    else    {        alert('请选择格式为*.jpg、*.gif、*.bmp、*.png、*.jpeg 的图片')//       return false    }    }    }  </script>

图片超过1M则不能上传 如图: