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

更新时间：2019年09月30日 09:07:42 作者：qq_43692768

这篇文章主要为大家详细介绍了JavaScript实现单图片上传并预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

纯js实现打字机效果
这篇文章主要为大家详细介绍了纯js实现打字机效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
客户端是UTF-8编码，这也是现在大家公认的标准编码在这种情况下，实用AJAX异步获取GB2312编码的服务器端信息时，不可避免的要遇到汉字乱码问题
2010-11-11
跟我学习javascript的var预解析与函数声明提升
跟我学习javascript的var预解析与函数声明提升，小编对var预解析与函数声明提升知识点也不甚了解，和大家一起学习本篇文章。
2015-11-11
Ant Design Pro 下实现文件下载的实现代码
这篇文章主要介绍了Ant Design Pro 下实现文件下载的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
微信JSAPI Ticket接口签名详解
这篇文章主要为大家详细介绍了微信JSAPI Ticket接口签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
JavaScript改变函数作用域的方法示例
本文主要介绍了JavaScript改变函数作用域的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-03-03
js 程序执行与顺序实现详解
JavaScript是一种描述型脚本语言，由浏览器进行动态的解析与执行，浏览器对于不同的方式有不同的解析顺序，详细介绍如下，感兴趣的朋友可以参考下哈
2013-05-05
禁止JS运行的代码
如果我们要让页面上的javascript不运行，方法最简单的就是使用noscript标签，经常被用来屏蔽那些免费空间要加上的JS。
2011-01-01
echarts实现折线图的拖拽效果
这篇文章主要为大家详细介绍了echarts实现折线图的拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
javascript在网页中实现读取剪贴板粘贴截图功能
这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图Ctrl+V粘贴到网页的一个输入框中,例如QQ截图、旺旺截图或者其它截图软件,需要的朋友可以参考下
2014-06-06