DAY19-上传头像并预览
一个简单的注册页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/bs/css/bootstrap.css">
<script src="/static/js/jquery-3.2.1.min.js"></script>
<style>
#avatar{
/*隐藏上传按钮-*/
display: none;
}
/*设置预览头像尺寸*/
.avatar_img{
width: 60px;
height: 60px;
margin-left: 10px;
}
.error{
color: red;
}
</style>
</head>
<body> <h3>注册页面</h3>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form>
{% csrf_token %}
<div class="form-group">
<label for="user">用户名</label>
<input type="text" id="user" class="form-control"><span class="error pull-right"></span>
</div>
<div class="form-group">
<label for="pwd">密码</label>
<input type="password" id="pwd" class="form-control"><span class="error pull-right"></span>
</div>
<div class="form-group">
<label for="repeat_pwd">确认密码</label>
<input type="password" id="repeat_pwd" class="form-control"><span class="error pull-right"></span>
</div> <div class="form-group">
<label for="email">邮箱</label>
<input type="email" id="email" class="form-control"><span class="error pull-right"></span>
</div>
<div class="form-group">
<!--label实现点击图片就能上传头像-->
<!--img显示默认图片-->
<label for="avatar">头像 <img src="/static/img/default.png" alt="" class="avatar_img"></label> <input type="file" id="avatar" class="form-control">
</div> <input type="button" value="submit" class="reg_btn btn btn-default">
<span class="error"></span>
</form>
</div>
</div>
</div> <script> // 头像预览
$("#avatar").change(function () {
//FileReader可以读出头像在客户端存放路径
var reader=new FileReader();
//获取头像对象
var choose_file=$(this)[0].files[0];
//用reader对象录取图片对象
reader.readAsDataURL(choose_file);
//reader需要一定时间,onload等待reader读完
reader.onload=function(){
//result获取图片路径,将src的默认图片地址更换为本地头像路径
$(".avatar_img").attr("src",reader.result)
}; }) // 注册
$(".reg_btn").click(function () { var formdata=new FormData();
formdata.append("user",$("#user").val());
formdata.append("pwd",$("#pwd").val());
formdata.append("email",$("#email").val());
formdata.append("repeat_pwd",$("#repeat_pwd").val());
formdata.append("avatar_img",$("#avatar")[0].files[0]); $.ajax({ url:"",
type:"post",
contentType:false,
processData:false,
data:formdata,
success:function (data) {
// console.log(data);
var data=JSON.parse(data); if (data.user){
console.log("OK")
}else{
// 清空操作
$("form span.error").html("") console.log(data.msg)
$.each(data.msg,function (filed,error_list) { $("#"+filed).next().html(error_list[0])
}) } } })
}) </script> </body>
</html>
DAY19-上传头像并预览的更多相关文章
- django 上传头像并预览 3选1
注册页面的头像上传 register.html<!DOCTYPE html> <html lang="en"> <head> <meta ...
- [.ashx檔?泛型处理例程?]基础入门#2....FileUpload上传前,预览图片(两种作法--ashx与JavaScript)
原文出處 http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...
- Ajax上传图片以及上传之前先预览
手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果 ...
- 关于confluence上传文件附件预览查看时出现乱码的问题解决办法
在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候 ...
- java多图片上传--前端实现预览--图片压缩 、图片缩放,区域裁剪,水印,旋转,保持比例。
java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...
- confluence上传文件附件预览乱码问题(linux服务器安装字体操作)
在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候 ...
- jsp+springmvc实现文件上传、图片上传和及时预览图片
1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...
- web 图片上传实现本地预览
在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...
- 图片上传前的预览(PHP)
1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post& ...
随机推荐
- 智课雅思词汇---十九、前缀se是什么意思
智课雅思词汇---十九.前缀se是什么意思 一.总结 一句话总结:前缀:se- 表示“分开, 离开, 区别开” 前缀:se- [词根含义]:分离 [同源单词]:secede, secession, s ...
- 常用的CDN 链接 http://cdn.code.baidu.com/ http://www.bootcdn.cn/
http://cdn.code.baidu.com/ http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs ★新浪CDN,感觉 ...
- 解决: PyInstaller打包后exe文件打开时出现failed to execute script
def resource_path(self, relative): if hasattr(sys, "_MEIPASS"): return os.path.join(sys._M ...
- substr 方法
substr 方法 返回一个从指定位置开始,并具有指定长度的子字符串. 参数 start 必选.所需的子字符串的起始位置.字符串中第一个字符的索引为 0. length 可选项.返回的子字符串中包含的 ...
- linux 部署python2.7
tar xvf Python-.tar.bz2 mkdir /usr/local/python27 ls cd Python- ./configure --prefix=/usr/local/pyth ...
- Windows7+VS2008 下编译Subversion 1.8.3
一.需要的软件包 1.python-2.7.5.msi http://www.python.org/ 2.ActivePerl-5.8.8.822-MSWin32-x86-280952.msi h ...
- Python3.6.0安装
1.安装 具体详情请参考下图: 双击安装包: 勾选“add python 3.6 to PATH”这样可以自动生成环境变量,选择“Customize installation”自定义安装. 2. ...
- input 标签中的checkd 添加与取消
//获取是否选中 var isChecked = $('#cb').prop('checked'); //或 var isChecked = $('#cb').is(":checked&qu ...
- 重温CLR(一)CLR基础
如果一个C#developer,对CLR没有了解,那就只能是入门级别.未来.NET CORE是趋势,但是.NET CORE 也是基于CoreCLR的,而CLR和CoreCLR其实差别不大,从runti ...
- loopqueue
import java.util.Arrays; public class loopQueue <E>{ public Object[] data=null; private int ma ...