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)
Oct 31 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
原生js实现吸顶效果
Mar 13 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
js is_valid_filename验证文件名的函数
Jul 19 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
JS forEach跳出循环2种实现方法
Jun 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定时自动生成静态HTML的实现代码
2010/06/20 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Python如何获取文件指定行的内容
2020/05/27 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
好的自荐信包括什么内容
2013/11/07 职场文书
计算机应用专业推荐信
2013/11/13 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
简历里的自我评价
2014/01/31 职场文书
2014全年工作总结
2014/11/27 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
法制主题班会教案
2015/08/13 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python