一个简单的注册页面:

<!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-上传头像并预览的更多相关文章

  1. django 上传头像并预览 3选1

    注册页面的头像上传 register.html<!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. [.ashx檔?泛型处理例程?]基础入门#2....FileUpload上传前,预览图片(两种作法--ashx与JavaScript)

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...

  3. Ajax上传图片以及上传之前先预览

    手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果 ...

  4. 关于confluence上传文件附件预览查看时出现乱码的问题解决办法

    在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候 ...

  5. java多图片上传--前端实现预览--图片压缩 、图片缩放,区域裁剪,水印,旋转,保持比例。

    java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...

  6. confluence上传文件附件预览乱码问题(linux服务器安装字体操作)

    在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候 ...

  7. jsp+springmvc实现文件上传、图片上传和及时预览图片

    1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...

  8. web 图片上传实现本地预览

    在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...

  9. 图片上传前的预览(PHP)

    1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post& ...

随机推荐

  1. 智课雅思词汇---十九、前缀se是什么意思

    智课雅思词汇---十九.前缀se是什么意思 一.总结 一句话总结:前缀:se- 表示“分开, 离开, 区别开” 前缀:se- [词根含义]:分离 [同源单词]:secede, secession, s ...

  2. 常用的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,感觉 ...

  3. 解决: PyInstaller打包后exe文件打开时出现failed to execute script

    def resource_path(self, relative): if hasattr(sys, "_MEIPASS"): return os.path.join(sys._M ...

  4. substr 方法

    substr 方法 返回一个从指定位置开始,并具有指定长度的子字符串. 参数 start 必选.所需的子字符串的起始位置.字符串中第一个字符的索引为 0. length 可选项.返回的子字符串中包含的 ...

  5. linux 部署python2.7

    tar xvf Python-.tar.bz2 mkdir /usr/local/python27 ls cd Python- ./configure --prefix=/usr/local/pyth ...

  6. 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 ...

  7. Python3.6.0安装

    1.安装 具体详情请参考下图: 双击安装包:   勾选“add  python 3.6 to PATH”这样可以自动生成环境变量,选择“Customize installation”自定义安装. 2. ...

  8. input 标签中的checkd 添加与取消

    //获取是否选中 var isChecked = $('#cb').prop('checked'); //或 var isChecked = $('#cb').is(":checked&qu ...

  9. 重温CLR(一)CLR基础

    如果一个C#developer,对CLR没有了解,那就只能是入门级别.未来.NET CORE是趋势,但是.NET CORE 也是基于CoreCLR的,而CLR和CoreCLR其实差别不大,从runti ...

  10. loopqueue

    import java.util.Arrays; public class loopQueue <E>{ public Object[] data=null; private int ma ...