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 相关文章推荐
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
Angular排序实例详解
Jun 28 Javascript
vue axios用法教程详解
Jul 23 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 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新手上路(四)
2006/10/09 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
简单的JavaScript互斥锁分享
2014/02/02 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
Python中的choice()方法使用详解
2015/05/15 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python每天定时运行某程序代码
2019/08/16 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
大学生求职简历的自我评价范文
2013/10/12 职场文书
《钱学森》听课反思
2014/03/01 职场文书
满月酒主持词
2014/03/27 职场文书
银行职员自我鉴定
2014/04/20 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
导游词范文
2015/02/13 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android