JavaScript实现单图片上传并预览功能


Posted in Javascript onSeptember 30, 2019

本文实例为大家分享了JavaScript实现单图片上传并预览功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>单图片上传并实现预览</title>
 <style>
  /*上传图片*/
 .addPerson{
  line-height: 190px;
 }
 .addPhoto{
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 40px;
  text-align: center;
  vertical-align: middle;
  border: 1px dashed #e7eaec;
  cursor: pointer;
  display: inline-block;
 }
 .addinput{
  display: none;
 }
 .addShow{
  width: 200px;
  height: 170px;
  display: inline-block;
  vertical-align: middle;
  background: #f3f3f48f;
  margin-left: 30px;
 }
 .addShow img{
  width: 130px;
  height: 130px;
  margin: 20px auto;
  display: block;
 }
 </style>
</head>
<body>
 <div class=" addPerson">
 <label class="col-sm-2 control-label">图片上传</label>
  <div class="col-sm-9" style="display: inline-block;">
  <div class="addPhoto">+</div>
  <div class="addinput">
   <input type="file" class="addFile" onchange="previewFile()" name="sPicture">
  </div>
  <div class="addShow" style="position: relative">
   <img src="" class="addImg" alt="">
  </div>
  </div>
 </div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>

 $(".addPhoto").click(function () {
 $('[type=file]').click();
 });

 function previewFile() {
 var preview = document.getElementsByClassName("addImg")[0];
 var file = document.getElementsByClassName('addFile')[0].files[0];
 var reader = new FileReader();

 reader.addEventListener("load", function () {
 preview.src = reader.result;

 }, false);

 if (file) {
 reader.readAsDataURL(file);
 }

 // ajax请求如下

 // 使用FormData将图片以文件的形式传到后台
 // pictureFile后台接收的参数

 // var formdata=new FormData();
 // formdata.append("pictureFile",addFile);
 // $.ajax({
 //  url:"",
 //  type:"post",
 //  dataType:"json",
 //  data:formdata,
 //  async: false, //四个false属性不能少
 //  cache: false,
 //  contentType: false,
 //  processData: false,
 //  success:function (data) {
 //   if(data.success){
 //   myAlert(data.msg);
 //   }

 //  },
 //  error:function () {
 //   if(data.success){
 //   myAlert(data.msg);
 //   }

 //  }

 //  })
}
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
javascript  数组排序与对象排序的实例
Jul 17 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
解决vue cli使用typescript后打包巨慢的问题
Sep 30 #Javascript
laravel实现中文和英语互相切换的例子
Sep 30 #Javascript
JavaScript键盘事件响应顺序详解
Sep 30 #Javascript
vue自动化路由的实现代码
Sep 30 #Javascript
js实现图片上传即时显示效果
Sep 30 #Javascript
vue实现select下拉显示隐藏功能
Sep 30 #Javascript
createObjectURL方法实现本地图片预览
Sep 30 #Javascript
You might like
一个更简单的无限级分类菜单代码
2007/01/16 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
javascript常见用法总结
2014/05/22 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
React快速入门教程
2017/01/17 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
python实现将元祖转换成数组的方法
2015/05/04 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python实现log日志的示例代码
2018/04/28 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
python 的topk算法实例
2020/04/02 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
服务之星获奖感言
2014/01/21 职场文书
简历上的自我评价
2014/02/03 职场文书
小学教师培训感言
2014/02/11 职场文书
2014年电教工作总结
2014/12/19 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
南京南京观后感
2015/06/02 职场文书
初级职称评定工作总结
2015/08/13 职场文书
详解Python描述符的工作原理
2021/06/11 Python
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS