欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-03-10 11:27:31
关于js实现图片的上传和回显，曾经用户的代码粘在这里： 样式：这样写样式的道理是给标签的父级设置一个背景图，就是‘+'那个背景图，然后把

关于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实现图片上传到服务器和回显

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

上一篇： JS运算符简单用法示例

下一篇： JS基础之逻辑结构与循环操作示例

推荐阅读