js上传图片到本地

JavaScript021

js上传图片到本地,第1张

<FORM method="POST" enctype="multipart/form-data" action="" name="form1">

图片:<img src="" ID="DoImgName1" width="300" height="200"><br>

选择：<INPUT type="file" name="ImgFile1" size="38" OnPropertyChange="dochange1()" value="">

</FORM>

<script language="javascript">

function dochange1() {

var thissrc

thissrc=this.form1.ImgFile1.value

strs=thissrc.toLowerCase()

lens=strs.length

extname=strs.substring(lens-4,lens)

if(extname==".jpg" || extname==".gif" || extname==".swf"){

document.all.DoImgName1.src=thissrc

}

}

</script>

​​​​​​

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

查看一下 你存储【图像】这个数据 的 数据库中 字段数据。

大多数情况你这个采集的都是 绝对路径。也就是 C:\xxx\xxx.xx这样的文件，这样的东西服务器是不认的。

改成相对路径就可以了。比如 xx\xx.xx这样的格式。