base64位多组图片显示美化并上传

2016-11-12 Jon js+jquery+ajax

js 选择单个base64位图片

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>js 选择多组base64位图片</title>
    <style>
      .showImg img{
        height:100px;
      }
      .select-img-box {
          position: relative;
          display: inline-block;
          background: #D0EEFF;
          border: 1px solid #99D3F5;
          border-radius: 4px;
          padding: 4px 12px;
          overflow: hidden;
          color: #1E88C7;
          text-decoration: none;
          text-indent: 0;
          line-height: 20px;
      }
      .select-img-box input {
          position: absolute;
          font-size: 100px;
          right: 0;
          top: 0;
          opacity: 0;
          height: 30px;
      }
      .select-img-box:hover {
          background: #AADFFD;
          border-color: #78C3F3;
          color: #004974;
          text-decoration: none;
      }
    </style>
  </head>
  <body>
    <input type="file" id="select-img" multiple="multiple">
    <div class="showImg"></div>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
      var selectImg = document.getElementById('select-img');
      $('body').on('change', '#select-img', function(){
        if (!window.FileReader) {
          alert('您的浏览器不支持 HTML5 的 FileReader，请更换谷歌浏览器上传图片！');
        }else{
          for(var i=0; i<selectImg.files.length; i++){
            var imgFile = new FileReader();
            imgFile.readAsDataURL(selectImg.files[i]);
            imgFile.onload = function () {
              var imgData = this.result; //base64数据
              $('.showImg').append('<a href="http://avatar.tietuku.com/" target="_blank"><img id="imgShow" src="'+imgData+'" alt=""></a>');
            }
          }
        }
      });
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

js 选择多组base64位图片美化选择框

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>js 选择多组base64位图片 美化type=file</title>
    <style>
      .showImg img{
        height:100px;
      }
      .table-upload-img {
        position: relative;
        display: inline-block;
        overflow: hidden;
        text-decoration: none;
        text-indent: 0;
        font-size: 38px;
        border: 1px dashed #ccc;
        color: #ddd;
        text-align: center;
        width: 26px;
        height: 24px;
        line-height: 24px;
        margin: 0 auto;
      }
      .table-upload-img .select-img {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
        height: 30px;
      }
    </style>
  </head>
  <body>
    <div class="img-group">
      <a href="javascript:;" class="table-upload-img">+
        <input type="file" class="select-img" multiple="multiple" accept="image/x-png,image/gif,image/jpeg,image/bmp">
      </a>
      <div class="showImg" data-img=""></div>
    </div>
    <div class="img-group">
      <a href="javascript:;" class="table-upload-img">+
        <input type="file" class="select-img" multiple="multiple" accept="image/x-png,image/gif,image/jpeg,image/bmp">
      </a>
      <div class="showImg" data-img=""></div>
    </div>
    <div class="img-group">
      <a href="javascript:;" class="table-upload-img">+
        <input type="file" class="select-img" multiple="multiple" accept="image/x-png,image/gif,image/jpeg,image/bmp">
      </a>
      <div class="showImg" data-img=""></div>
    </div>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
      $('body').on('change', '.select-img', function(){
        if (!window.FileReader) {
          alert('您的浏览器不支持 HTML5 的 FileReader，请更换谷歌浏览器上传图片！');
        }else{
          var imgArr = [];
          var $this = $(this);
          var _this = $this.get(0);
          var len = _this.files.length;
          if(len<=5){
            for(var i=0; i<len; i++){
              var imgName = _this.files[i].name;
              var imgFile = new FileReader();
              imgFile.readAsDataURL(_this.files[i]);
              imgFile.onload = function () {
                var imgData = this.result; //base64数据
                $this.parent().next().append('<a href="http://avatar.tietuku.com/" target="_blank"><a href="http://avatar.tietuku.com/" target="_blank"><img class="imgShow" src="'+imgData+'" alt=""></a></a>');
                imgArr.push(imgData);
              }
            }
          }else{
            alert('上传图片个数最多不能超过5个');
          }
        }
      });
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

js 选择多组base64位图片美化选择框2

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>js 选择多组base64位图片2</title>
    <style>
      .showImg img{
        height:100px;
      }
      .select-img-box {
          position: relative;
          display: inline-block;
          background: #D0EEFF;
          border: 1px solid #99D3F5;
          border-radius: 4px;
          padding: 4px 12px;
          overflow: hidden;
          color: #1E88C7;
          text-decoration: none;
          text-indent: 0;
          line-height: 20px;
      }
      .select-img-box input {
          position: absolute;
          font-size: 100px;
          right: 0;
          top: 0;
          opacity: 0;
          height: 30px;
      }
      .select-img-box:hover {
          background: #AADFFD;
          border-color: #78C3F3;
          color: #004974;
          text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="img-group">
      <a href="javascript:;" class="select-img-box">选择文件
        <input type="file" class="select-img" multiple="multiple" accept="image/x-png,image/gif,image/jpeg,image/bmp">
      </a>
      <div class="showImg" data-img=""></div>
    </div>
    <div class="img-group">
      <a href="javascript:;" class="select-img-box">选择文件
        <input type="file" class="select-img" multiple="multiple" accept="image/x-png,image/gif,image/jpeg,image/bmp">
      </a>
      <div class="showImg" data-img=""></div>
    </div>
    <div class="img-group">
      <a href="javascript:;" class="select-img-box">选择文件
        <input type="file" class="select-img" multiple="multiple" accept="image/x-png,image/gif,image/jpeg,image/bmp">
      </a>
      <div class="showImg" data-img=""></div>
    </div>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
      // var selectImg = document.getElementById('select-img');
      var selectImg = $('.select-img');
      $('body').on('change', '.select-img', function(){
        if (!window.FileReader) {
          alert('您的浏览器不支持 HTML5 的 FileReader，请更换谷歌浏览器上传图片！');
        }else{
          var imgArr = [];
          var $this = $(this);
          var _this = $this.get(0);
          var len = _this.files.length;
          if(len<=5){
            for(var i=0; i<len; i++){
              var imgName = _this.files[i].name;
              var imgFile = new FileReader();
              imgFile.readAsDataURL(_this.files[i]);
              imgFile.onload = function () {
                var imgData = this.result; //base64数据
                $this.parent().next().append('<a href="http://avatar.tietuku.com/" target="_blank"><a href="http://avatar.tietuku.com/" target="_blank"><img class="imgShow" src="'+imgData+'" alt=""></a></a>');
                imgArr.push(imgData);
              }
            }
          }else{
            alert('上传图片个数最多不能超过5个');
          }
        }
      });
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

标签: base64

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇这是我的美梦,白日梦。
上一篇html5+js 监听网络在线与离线?

发表评论：

知向前端

base64位多组图片显示美化并上传

js 选择单个base64位图片

js 选择多组base64位图片美化选择框

js 选择多组base64位图片美化选择框2

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档

知向前端

base64位多组图片显示美化并上传

js 选择单个base64位图片

js 选择多组base64位图片 美化选择框

js 选择多组base64位图片 美化选择框2

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档

js 选择多组base64位图片美化选择框

js 选择多组base64位图片美化选择框2