JQuery 实现Android伪多图上传

最新推荐文章于 2022-06-16 15:57:50 发布

眼中的黑白

最新推荐文章于 2022-06-16 15:57:50 发布

阅读量484

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/samuelye94/article/details/52583217

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.用户点击上传按钮，js生成一个input type=file,并直接对这个元素加上click()事件，然后但input选择文件，即change后再新增一个input，以此实现在安卓上的多图上传。注：input type=file的name属性设置与multiple是一致，采用name[]，这样后台接收到比较容易出来
2.实现缩略图原理是读取图片的本地url,然后赋值给img展现出来。读取url的方法封装在getObjectURL()中，实现不同浏览器适应。参数为input type=file,change()时的 this.files;
3.实现大图查看，用到插件 imgbox,即$(this).imgbox();参数可参考手册
4.上述操作都需要改变dom，并且需要获得元素标签，所以在生成的时候用k,i组合做自增id值区分，详细过程可直接参考代码


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width = device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="MobileOptimized" content="320"/>
  <meta name="format-detection" content="telephone=no">
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <!-- 自定样式 -->
  <link rel="stylesheet" href="./css/style.css">
  <!--查看大图的js效果与样式-->
  <link rel="stylesheet" href="./css/imageView.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/jquery.imgbox.pack.js"></script>
</head>

<body>
<nav>
  <ul>
    <li><a href="post.php" class="top-btn" style="color:#5CACEE">提交</a></li>
    <li><a href="../view/Templates/support_v1/qq/<{$qq_file}>" class="top-btn qq-btn">samuel</a></li>
  </ul>
</nav>

<div style="height:70px"></div>

<div class="container">
  <form method="post" id="form0" action="" enctype="multipart/form-data">
    <table class="table">
      <tbody>
      <tr>
      <th width="60px" style="vertical-align: middle">内容</th>
      <td><textarea name="content" id="" style="min-height:100px;width:100%;"></textarea>
        <br /><span name="content" style="color: red"></span>
      </td>
      </tr>
      <tr>
        <th width="60px" >截图</th>
        <td><input id="img_button" type="button" class="btn btn-default" value="上传截图" />
          <br />
          <span id="img_view"></span>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <table width="100%" style="text-align:center;">
            <td ><input class="btn btn-default"  type="reset" value="重新编辑" onclick='$("#img_view").html("");$("input").remove(".img_input_file") ' /></td>
            <td><button class="btn btn-default" type=button onclick="window.location.href='../index.php'">返回</button></td>
            <td><input type="submit" class="btn btn-default"  value="提交问题"/></td>
          </table>
        </td>
      </tr>
      </tbody>
    </table>
  </form>
</div>
<script language="JavaScript">
  $("textarea[name=content]").blur(function () {
    if ($(this).val().trim() == "") {
      $("span[name=content]").html("内容不能为空");
    }else{
      $("span[name=content]").html("");
    }
  });

  var k=1;
  $("#img_button").click(function () {
    //第一步的 生成多个input
      var input_img = "<input type='file' class='img_input_file' name='img[]' id='img"+k+"' style='display: none'>";
      $(this).after(input_img);
      $("#img"+k).click();
      $("#img"+k).change(function(){
        //第二步 读取图片的url
          var objUrl = new Array();
          for (var i=0;i<this.files.length;i++)    {
              objUrl.push(getObjectURL(this.files[i]));
          }
          if (objUrl) {
              for (var i=0;i<objUrl.length;i++){
                  //将url 增加到img中展现出来
                  var img = '<a id="imgView'+k+'-'+i+'" title="" href= "'+objUrl[i]+'"> <img src="'+objUrl[i]+' " width="100" height="100" style="margin-right: 15px" alt="点击查看大图" title="点击查看大图"/></a>';
                  $("#img_view").append(img);
                  //第三步 imgbox 插件增加大图效果
                  $(document).ready(function() {
                      $("#imgView"+k+'-'+i).imgbox({
                          'padding'       : 0,
                          'speedIn'     : 0,
                          'speedOut'        : 0,
                          'autoScale'     : true,
                          'alignment'       : 'center',
                          'overlayShow' : true,
                          'allowMultiple'   : true
                      });
                  });
              }
          }
      }) ;
      k++;
  });

  //读取file的url
  function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // firefox
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }

</script>


</body>
</html>

源码下载

眼中的黑白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 实现Android伪多图上传

1.用户点击上传按钮，js生成一个input type=file,并直接对这个元素加上click()事件，然后但input选择文件，即change后再新增一个input，以此实现在安卓上的多图上传。注：input type=file的name属性设置与multiple是一致，采用name[]，这样后台接收到比较容易出来 2.实现缩略图原理是读取图片的本地url,然后赋值给img展现出来。
复制链接

扫一扫

专栏目录