上传图片并在页面显示的一些问题
2017-03-24 09:36
169 查看
FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件。使用Data URL的好处是,您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料;而缺点便是,网页的大小可能会变大。它适合应用在内嵌小图片,不建议将大图像文件编码成Data URL来使用。您的图像文件不能够超过浏览器限定的大小,否则无法读取图像文件。
参考以下使用readAsDataURL读取图像文件范例:
readAsDataURL方法会使用base-64进行编码,编码的资料由data字串开始,后面跟随的是MIME type,然后再加上base64字串,逗号之后就是编码过的图像文件的内容。
使用Img显示图像文件
若想要将读取出来的图像文件,直接显示在网页上,您可以透过JavaScript建立一个<img>标签,再设定src属性为Data URL,再将<img>标签加入DOM之中,例如以下范例所示:
读取部分文件
有时想要读取的文件太大,想要分段进行读取;或者只想要读取文件部分的内容,这时您可以将文件切割,根据浏览器的不同,可以使用以下方法:
webkitSlice:适用于支持Webkit引擎的浏览器,如Chrome。
mozSlice:适用于Firefox。
这两个方法要传入开始的位元组索引,以及结尾的位元组索引,索引以0开始。以下程式范例以FileReader对象的readAsBinaryString方法来读取文件,只读取文件的第三个位元组读取到第六个位元组:
参考以下使用readAsDataURL读取图像文件范例:
使用Img显示图像文件
若想要将读取出来的图像文件,直接显示在网页上,您可以透过JavaScript建立一个<img>标签,再设定src属性为Data URL,再将<img>标签加入DOM之中,例如以下范例所示:
有时想要读取的文件太大,想要分段进行读取;或者只想要读取文件部分的内容,这时您可以将文件切割,根据浏览器的不同,可以使用以下方法:
webkitSlice:适用于支持Webkit引擎的浏览器,如Chrome。
mozSlice:适用于Firefox。
这两个方法要传入开始的位元组索引,以及结尾的位元组索引,索引以0开始。以下程式范例以FileReader对象的readAsBinaryString方法来读取文件,只读取文件的第三个位元组读取到第六个位元组:
相关文章推荐
- Django1.4上传图片无法在页面显示的问题
- 关于使用ueditor编辑器--ueditor文件夹与编辑器初始化页面不在同一目录下,上传图片显示问题
- spring boot实现上传图片并在页面上显示及遇到的问题小结
- 关于ajaxfileupload.js一些问题和上传图片就立即显示图片功能
- Struts2上传图片到Mysql数据库中,以及显示到页面
- 上传asp.net页面存在的一些问题
- asp.net+FCKeditor上传图片显示叉叉图片无法显示的问题的解决方法
- PHP学习技巧总结乱码显示问题,register_global为On的时候,图片上传数据库
- SSH+SQLServer2005图片文件上传及页面显示
- Struts2上传图片到Mysql数据库中,以及显示到页面
- FCKeditor上传图片显示叉叉的问题的解决方案
- 不刷新,点击上传图片,传完图片后,这个页面即刻显示图片?
- 处理用户上传图片大小不一,前台显示的问题
- struts2+hibernate+sqlserver2005图片上传以及在页面显示
- JFreeChart在JSP(tomcat)中的一些问题(图片不显示)
- c# asp.net 使用kindeditor在服务器上不能显示上传图片的页面等解决办法
- treeview上传后无法正常显示图片问题
- FCKEditor 图片上传一直显示进度条的问题
- Struts2上传图片到Mysql数据库中,以及显示到页面
- 上传图片的问题,点击浏览选择图片后就可以在image框显示图片,不要再点击上传