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 事件记录使用说明
Oct 20 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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
无线电的诞生过程
2021/03/01 无线电
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
js计数器代码
2006/11/04 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
Python中使用SAX解析xml实例
2014/11/21 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
pandas参数设置的实用小技巧
2020/08/23 Python
python3代码中实现加法重载的实例
2020/12/03 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
竞聘副主任科员演讲稿
2014/01/11 职场文书
会计专业自荐书
2014/07/08 职场文书
总账会计岗位职责
2015/04/02 职场文书
电影红河谷观后感
2015/06/11 职场文书
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL