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 相关文章推荐
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
javascript网页随机点名实现过程解析
Oct 15 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
留言板翻页的实现详解
2006/10/09 PHP
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
js微信分享实现代码
2020/10/11 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
Django 重写用户模型的实现
2019/07/29 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
美的官方商城:Midea
2016/09/14 全球购物
携程英文网站:Trip.com
2017/02/07 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
文秘专业自荐信
2013/10/14 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
基层党员对照检查材料
2014/08/25 职场文书
公司介绍信范文
2015/01/31 职场文书
党支部培养考察意见
2015/06/02 职场文书
丧事主持词
2015/07/02 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL