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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
js+h5 canvas实现图片验证码
Oct 11 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
pw的一个放后门的方法分析
2007/10/08 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
python使用zip将list转为json的方法
2018/12/31 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
python scatter函数用法实例详解
2020/02/11 Python
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
高校教师思想汇报
2014/01/11 职场文书
市场部经理岗位职责
2014/04/10 职场文书
诚信考试倡议书
2014/04/15 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
微信早安问候语
2015/11/10 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书