js实现图片上传到服务器和回显


Posted in Javascript onJanuary 19, 2020

关于js实现图片的上传和回显,曾经用户的代码粘在这里:

样式:这样写样式的道理是给<input>标签的父级设置一个背景图,就是‘+'那个背景图,然后把<input>的宽高设置得跟父级一样,且完全透明(注意是透明不是隐藏),这样点击的时候看似是点击的‘+'的节点,其实点击的是<input>节点。

.file-box {
   position: relative;
   display: inline-block;
   width:100px;
   height:100px;
   background:url('images/uploadPc.png')no-repeat;
   background-size:100px 100px;
  }
  #input_file{
   width:100%;
   height:100%;
   opacity: 0;
   filter:alpha(opacity=0);
  }

input标签:

<div class="file-box">
  <input type="file" value="" name="file" id = "input_file"
   accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" οnchange="imgPreview(this,0)" >
</div>

实现imgPreview()方法: 这个方法是给$("#input_file")这个对象设置图片的值并回显图片

function imgPreview(fileDom,i) {
  //判断是否支持FileReader
  if(window.FileReader) {
   var reader = new FileReader();
  } else {
   alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
  }
  //获取文件
  var file = fileDom.files[0];
  var imageType = /^image\//;
  //是否是图片
  if(!imageType.test(file.type)) {
   alert("请选择图片!");
   return;
  }
  //读取完成
  reader.onload = function(e) {
   //图片路径设置为读取的图片
   // img.src = e.target.result;
   console.log(document.getElementsByClassName('file-box'));
   document.getElementsByClassName('file-box')[i].style.background = "url("+e.target.result+")no-repeat";//回显图片
   document.getElementsByClassName('file-box')[i].style.backgroundSize = '200px 160px';
   console.log('reader',reader)
  };
  reader.readAsDataURL(file);
 }

上传部分的代码:

var formData = new FormData();
formData.append('photo', $('#input_file')[0].files[0]);
//ajax请求
$.ajax({
   type: "post",
   url: "接口地址",
   data: formdata,
   dataType: 'json',
   processData: false, // 告诉jQuery不要去处理发送的数据
   contentType: false, // 告诉jQuery不要去设置Content-Type请求头
   xhrFields:{withCredentials:true},
   async: true, //默认是true:异步,false:同步。
   success: function (data) {
    callback(data);
   },
   error: function (data) {
    layer.msg('请求异常');
   },
  });

最终实现效果:

js实现图片上传到服务器和回显

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
angularjs基础教程
Dec 25 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
VUE 动态组件的应用案例分析
Dec 02 Javascript
javascript canvas检测小球碰撞
Apr 17 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 Javascript
Javascript实现单选框效果
Dec 09 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 #Javascript
ES6 Object.assign()的用法及其使用
Jan 18 #Javascript
vue项目中监听手机物理返回键的实现
Jan 18 #Javascript
vue组件内部引入外部js文件的方法
Jan 18 #Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 #Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 #Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 #Javascript
You might like
什么是短波收听SWL
2021/03/01 无线电
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
php header函数的常用http头设置
2015/06/25 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
浅析JS运动
2015/12/28 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
Python中每次处理一个字符的5种方法
2015/05/21 Python
Python中文竖排显示的方法
2015/07/28 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
html5与css3小应用
2013/04/03 HTML / CSS
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
干部个人考察材料
2014/12/24 职场文书
旷工检讨书1000字
2015/01/01 职场文书
体育教师个人工作总结
2015/02/09 职场文书
公司人事任命通知
2015/04/20 职场文书
幸福终点站观后感
2015/06/04 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
初一军训感言
2015/08/01 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫