通过JS动态添加html控件后,添加样式以及OnClick

最新推荐文章于 2025-07-08 09:04:47 发布

原创最新推荐文章于 2025-07-08 09:04:47 发布 · 3.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态生成图片上传界面的方法，包括文件输入、上传按钮及预览图像等功能。通过简单的函数实现，可以轻松地为网页增加图片上传模块。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * 新增标签
 * @param count
 */
function addLabel(count){
   var image_id_obj = document.getElementById("image_id_"+count);
   
   var div = document.createElement("div");
   	   div.id="image_id_"+count;
   	   
   	
   //创建file
   var inputText = document.createElement("input");
   inputText.type = "file";
   inputText.name = "q1lqzp_"+count;
   inputText.id = "q1lqzp_"+count;
   
   
   
   //创建上传按钮
   var btn = document.createElement("input");
   btn.type = "button";
   btn.value = "上传";
   btn.id = "upload_btn_"+count;
   btn.onclick = function(){
	   upload('q1lqzp_'+count,this);
   };
   
   //创建取消按钮
   var btn_close = document.createElement("input");
   btn_close.type = "button";
   btn_close.value = "取消";
   btn_close.id = "close_btn_"+count;
   btn_close.style.cssText="display: none;";
   btn_close.onclick = function(){
       
   };  
   var img = document.createElement("img");
     img.id = "tp_"+count;
    //添加css样式
    img.style.cssText="display: none;";
   
   
   div.appendChild(inputText);
   div.appendChild(btn);
   div.appendChild(btn_close);
   
   div.appendChild(img);
//   div.innerHTML=img;
   //往上一个div添加新创建的div
   $("#image_id_"+parseInt(parseInt(count)-1)).after(div);
}