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动态调整iframe高度的代码
Apr 10 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 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中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
Vuex 入门教程
2018/01/10 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
python分析网页上所有超链接的方法
2015/05/08 Python
Python单元测试实例详解
2018/05/25 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
房屋继承公证书
2014/04/10 职场文书
工地安全标语
2014/06/07 职场文书
文艺晚会策划方案
2014/06/11 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python