JavaScript多图片上传案例

 更新时间:2022年02月23日 16:58:43   投稿:lijiao  
JS上传多图片例子,为了更人性化,不要固定初始化时的个数,可以通过由用户决定上传图片的个数,即是动态地创建上传图片文框和按钮的个数,感兴趣的小伙伴们可以参考一下

JS多图片上传小小实例:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>上传多图片</title>
  <script type="text/javascript">
    function JM_wu(ob) {
      ob.style.display = "none";
    }
    function JM_you(ob) {
      ob.style.display = "";
    }
    function createForm(textN, number) {
      data = "";
      inter = "'";
      if (number < 11 && number > -1) {
        for (i = 1; i <= number; i++) {
          if (i < 10) spaces = " ";
          else spaces = " ";
          data = data + " <input name=" + textN + i + " type=text value='' size='30' maxlength='100'>"
          + "<INPUT TYPE='button' value='上传" + i + "' onclick=javascript:uppic('more" + i + "','more" + i + "')>";
        }
        if (document.layers) {
          document.layers.cust.document.write(data);
          document.layers.cust.document.close();
        }
        else {
          if (document.all) {
            cust.innerHTML = data;
          }
        }
      }
      else {
        window.alert("请不要超过10张图片.");
      }
    }
</script>
</head>
<body>
  <form name="prodtable" action="">
  <input type="radio" name="more_pic" checked value="0" onclick="JM_wu(s1)">无
  <input type="radio" name="more_pic" value="1" onclick="JM_you(s1)">有 <span id="s1" style="display:none">
    <input name="more" type="text" value='1' size='5' maxlength='2'>
    <input type="button" value="张大图" onclick="createForm('more',document.prodtable.more.value);">
    <span id="cust" style="position: relative;"></span></span>
  </form>
</body>
</html>

这只是一个指引的小例子,同学们可以把按钮换成浏览图片按钮。

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

相关文章

  • JS表单提交验证、input(type=number) 去三角 刷新验证码

    JS表单提交验证、input(type=number) 去三角 刷新验证码

    在进行表单提交时,需要对输入框和文本域等的value的合理性进行验证,可以编写form的onSubmit事件,下面给大家介绍js表单提交验证input(type=number) 去三角 刷新验证码注意事项,一起看看吧
    2017-06-06
  • JS短路原理的应用示例 精简代码的途径

    JS短路原理的应用示例 精简代码的途径

    正如标题所言,js中||和&&的特性帮我们精简了代码的同时,也带来了代码可读性的降低。这就需要我们自己来权衡了,下面有个不错的示例
    2013-12-12
  • 原生js做的手风琴效果的导航菜单

    原生js做的手风琴效果的导航菜单

    手风琴效果的导航想必大家都有见到过吧,实现的方法也有很多,在本文为大家介绍下使用原生js简单实现下,感兴趣的朋友不要错过
    2013-11-11
  • JavaScript中判断函数、变量是否存在

    JavaScript中判断函数、变量是否存在

    这篇文章主要介绍了JavaScript中判断函数、变量是否存在,本文给出了多个判断函数是否存在的方法,并分别给出代码实例,需要的朋友可以参考下
    2015-06-06
  • js 高效去除数组重复元素示例代码

    js 高效去除数组重复元素示例代码

    有关使用js去除数组重复元素的文章在之前也有介绍过,下面有个不错示例,感兴趣的朋友可以参考下
    2013-12-12
  • JS window对象的top、parent、opener含义介绍

    JS window对象的top、parent、opener含义介绍

    本文为大家介绍下JS window对象的top、parent、opener含义,不了解的朋友可以参考下,希望对大家有所帮助
    2013-12-12
  • 用纯JS实现二级菜单效果

    用纯JS实现二级菜单效果

    这篇文章主要为大家详细介绍了用纯JS实现二级菜单效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • JavaScript 应用技巧集合[推荐]

    JavaScript 应用技巧集合[推荐]

    前段时间我曾经对JavaScript中的应用技巧进行了收集和总结这里我将会对这些应用技巧进行集中描述,如果你觉得遗漏了一些好用的应用技巧,也请在留言中提出,我会及时更新到这篇文章中的。
    2009-08-08
  • 一文读懂JavaScript 中的延迟加载属性模式

    一文读懂JavaScript 中的延迟加载属性模式

    开发人员在javascript类中为实例中需要的任何书籍创建属性,但是如果实例中可用之前需要计算某些数据该如何处理呢,今天小编通过本文给大家分享JavaScript 中的延迟加载属性模式,一起看看吧
    2021-06-06
  • PHP实现本地图片上传和验证功能

    PHP实现本地图片上传和验证功能

    这篇文章主要为大家详细介绍了PHP实现本地图片上传和验证功能的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02

最新评论