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 相关文章推荐
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
javascript 常见功能汇总
Jun 11 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
jQuery Ajax全解析
Feb 13 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
js实现简单抽奖功能
Nov 24 Javascript
解决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
用PHP实现递归循环每一个目录
2010/08/08 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
Python的面向对象思想分析
2015/01/14 Python
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
python批量生成条形码的示例
2020/10/10 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
大学生求职简历的自我评价
2013/10/21 职场文书
学校春季防火方案
2014/06/08 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
见习报告格式要求
2014/11/04 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
python百行代码实现汉服圈图片爬取
2021/11/23 Python
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL