jquery实现上传图片功能的方法

发布时间：2020-06-30 09:12:48 作者：清晨
来源：亿速云阅读：219

不懂jquery实现上传图片功能的方法？其实想解决这个问题也不难，下面让小编带着大家一起学习怎么去解决，希望大家阅读完这篇文章后大所收获。

代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>点击头像上传图片</title>
<style>
*{
  margin:0;
  padding: 0;
}
div,#avarimgs,#xdaTanFileImg{
  width: 100px;
  height: 100px;
}
div{
  margin:50px auto;
  position: relative;
}
#xdaTanFileImg{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
</style>
</head>
<body>
  <div>
    <input type="file" name="pclogo" id="xdaTanFileImg" onchange="xmTanUploadImg(this)" accept="image/*">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3787285033,4172246344&fm=26&gp=0.jpg" class="img-circle img-thumbnail img-responsive" id="avarimgs">
  </div>
</body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript"> 
 
if (typeof FileReader == 'undefined') {
  document.getElementById("xmTanDiv").InnerHTML = "<h2>当前浏览器不支持FileReader接口</h2>";
  document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");
}
//选择图片，马上预览
 function xmTanUploadImg(obj) {
  console.log(obj)
 var file = obj.files[0];        
 console.log(obj);console.log(file);
 console.log("file.size = " + file.size);
 var reader = new FileReader();
 reader.onloadstart = function (e) {
   console.log("开始读取....");
 }
  reader.onprogress = function (e) {
     console.log("正在读取中....");
 }
 reader.onabort = function (e) {
   console.log("中断读取....");
 }
 reader.onerror = function (e) {
   console.log("读取异常....");
 }
 reader.onload = function (e) {
   console.log("成功读取....");
 var img = document.getElementById("avarimgs");
   img.src = e.target.result;
  //或者 img.src = this.result; //e.target == this
 }
   reader.readAsDataURL(file)
 }
</script>
 
</html>

感谢你能够认真阅读完这篇文章，希望小编分享jquery实现上传图片功能的方法内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!

jquery实现上传图片功能的方法

相关阅读