JS实现上传图片的三种方法并实现预览图片功能

前端之家收集整理的这篇文章主要介绍了JS实现上传图片的三种方法并实现预览图片功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览。

常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面;另一种思路是,直接在本地内存中预览图片用户确认提交后再上传至服务器保存。

这两种方法各有利弊,方法一很明显,浪费流量和服务器资源;方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持)。

以下是实现上述思路的方法

1. 模板文件

<Meta charset="UTF-8"> Title
用户注册

用户名

密码:

邮箱: 标签隐藏,display:none; #}

注册">

@H_403_26@
图片" style="position: absolute; z-index: 9; float: left; width: 100px; height: 100px">

2. 视图函数

3. 路由系统

上传头像 url(r'^test/',homeViews.test),# 测试页面 ]

验证效果

选择图片前:

Ajax上传图片至服务器,并返回浏览器该图片的url:

window.FileReader本地预览,form表单提交:

window.URL.createObjectURL本地预览,form表单提交:

以上所述是小编给大家介绍的JS实现上传图片的三种方法并实现预览图片功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章