js动态添加File控件

最新推荐文章于 2023-12-17 12:43:03 发布
最新推荐文章于 2023-12-17 12:43:03 发布
阅读量3.3k 收藏 1
点赞数
分类专栏： JS 文章标签： file input button div function javascript
<script language="javascript" type="text/ecmascript">
//======================
//功能:在表单中input file控件
//参数:parentID---要插入input file控件的父元素ID
//    inputID----input file控件的ID
//======================
function createInput(parentID,inputFileID){  
  var parent=$(parentID);//获取父元素
 
  var div=document.createElement("div");//创建一个div容器用于包含input file
  var x=parseInt(Math.random()*(80-1))+1;
  var divName=inputFileID+x.toString();//随机div容器的名称
  div.name=divName;
  div.id=divName;
 
  var  aElement=document.createElement("input"); //创建input
  aElement.name=inputFileID;
  aElement.id=inputFileID;
  aElement.type="file";//设置类型为file
 
  var delBtn=document.createElement("input");//再创建一个用于删除input file的Button
  delBtn.type="button";
  delBtn.value="删除";
  delBtn.οnclick=function(){ removeInput(parentID,divName)};//为button设置onclick方法
 
  div.appendChild(aElement);//将input file加入div容器
  div.appendChild(delBtn);//将删除按钮加入div容器
  parent.appendChild(div);//将div容器加入父元素
}
//============================
//功能:删除一个包含input file的div 容器
//参数:parentID---input file控件的父元素ID
//    DelDivID----个包含input file的div 容器ID
//============================
function removeInput(parentID,DelDivID){
 var parent=$(parentID);
 parent.removeChild($(DelDivID));
}
//通过元素ID获取文档中的元素 
function $(v){return document.getElementById(v);}
</script>
<body>
<div align="left" id="div_Pic" style="border:1px solid #CCCCCC">
 <input name="PicFile" type="file" id="ShowPicFile">
</div>
<input type="button" onClick="createInput('div_Pic','PicFile')" name="button" id="button" value="+ 继续添加图片">
</body>
</html>
remotesupport
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js动态创建fileupload控件，js判断上传文件的大小，超过指定的大小删除掉
xinber的专栏
11-28 8744
在做批量上传时，使用的是js动态创建fileupload控件，在创建出来的控件里上传文件时，判断长传的大小，超出时，进行提示并清空当前的fileupload 一、单个上传文件时的Js判断大小验证 var templength=0;//保存所有的长度的变量  var flength=10240;  //设置上传的文件最大值（单位：kb），超过此值则不上传。 function getFi
asp.net html控件的File控件实现多文件上传实例分享
10-27
在HTML代码中，可以看到一个动态添加File输入框的功能，通过JavaScript的`addFile()`和`resetFile()`函数实现。用户可以通过点击“增加”按钮添加更多文件选择框，点击“重置”按钮则清除所有已选文件。 HTML代码...
js动态添加file标签
03-20
js动态添加生成多个file和删除按钮,并上传到服务器
移动端一次上传多个图片（动态创建file类型的input）
热门推荐
itlsq的博客
06-13 1万+
描述 最近在做公司的一个移动端上传图片的业务，如果这是在PC端，将非常的简单，因为给input设置属性multiple后PC端按住ctrl键就可以一次性选择多个图片，但是在移动端确不可以，移动端选择一张图片后会自动返回到APP中，想再添加一张的话还需要再次进入，所以体验不是很好，目前没找到合适的方法，只能暂时先这样了，我们今天的焦点是：如何一次性上传多张图片（注意：不是一次性选择多个图片）？ ...
js 动态创建对象、引入文件等
编程日常记录与总结 https://franciswmf.iteye.com
04-12 452
1、根据需要引入css文件 /** * 额外引入css文件 */ function doAddCssFun(){ var link = document.createElement('link'); link.type = 'text/css'; link.rel = 'stylesheet'; link.href = './css/mainDemo.css';
JS动态创建input
qq_42689281的博客
06-29 2731
<!DOCTYPE html> <html> <head> <title>HAOHAO</title> <style type="text/css"> </style> </head> <body> <div id="div"> <input type="button" name="add_input" value="增加" onclick="addInput();"
用.Net的File控件上传文件的解决方案
10-30
用.Net的File控件上传文件的解决方案 在本文中，我们将讨论如何使用.Net的File控件上传文件，并解决大文件上传问题。 一、上传大文件的解决方案 在上传大文件时，我们可能会遇到各种问题，例如超时、文件大小限制...
单file控件批量上传文件
01-22
在“单file控件批量上传文件”的实现过程中，JavaScript负责前端的文件选取、预览、进度显示等功能。它会遍历用户选择的每个文件，创建FormData对象，将文件添加到FormData中，然后通过XMLHttpRequest或fetch API...
mvc file控件无刷新异步上传操作
10-21
在本文中，我们将深入探讨如何实现一个基于ASP.NET MVC的无刷新异步文件上传功能，特别是在使用file输入控件时。这个功能对于现代Web应用程序来说是至关重要的，因为它提供了更好的用户体验，用户无需等待页面刷新...
借助FileUpload控件在Image Rotator中添加图像
04-07
在ASP.NET Web应用程序中，创建一个交互性强且吸引用户的界面是一项重要的任务。"借助FileUpload控件在Image Rotator中添加图像"这个...FileUpload控件结合ImageRotator控件，为网站添加了动态交互性，增强了用户体验。
jQuery动态添加input type=”file”
12-06
有时候需要在页面上允许用户上传多个文件，个数由用户自己决定，个数多了也可以删除，使用jQuery可以很简单的实现这个功能。 先给大家展示下效果图： <!DOCTYPE html> <html> <head> <title>test.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> [removed][removed] [removed]
js创建对象的几种方式
10-12
1.new Object() 2.字面量创建对象 构造函数创建对象 工厂模式
js生成input file并调用click问题
michaelwave123的专栏
11-03 1297
使用js生成input file 调用该元素的click元素suo
input file详细介绍
最新发布
sunqinshan的博客
12-17 2950
input file详细介绍
JavaScript的FileList File FileReader对象
hairangburangzhucea的博客
04-17 6882
针对于文件上传域的file操作的总结：1.通过files属性可以访问&lt;input id="XX" type="files".../&gt;的所有选中的文件，document.getElemnetById("XX").files,通过files属性获得的是一个FileList对象数组，他的每个元素都是File对象，可以通过(name size type等属性)对每个元素的访问。&lt;body...
file对象
过客如期的博客
07-15 1806
1.在javascript中，File对象代表一个文件，是文件在代码中的抽象表示。
通过js创建file对象_js-创建对象的多种方式
weixin_42300317的博客
01-22 2940
1. 工厂模式function createPerson(name) { var o = new Object(); o.name = name; o.getName = function () { console.log(this.name); }; return o;}var person1 = createPerson('kevin');缺点：对象无法识别，因为所有的实例都指向一个原型2. ...
input file类型文件上传获取文件内容前端做法
weixin_46453221的博客
09-16 3588
<input type="file" id="updateInput"> <script> let fileInput = document.getElementById("updateInput"); fileInput.onchange = function(){ let resultFile = document.getElementById("updateInput").files[0]; let reader = new FileReader(); read
JS实现Html File控件赋值
06-06
你可以使用JavaScript来实现Html File控件的赋值，代码示例如下： ```html <input type="file" id="fileInput"> <button onclick="chooseFile()">选择文件</button> ``` ```javascript function chooseFile() { document.getElementById('fileInput').click(); document.getElementById('fileInput').addEventListener('change', function() { var file = this.files[0]; console.log(file.name); // 可以在这里对文件进行操作 }); } ``` 首先，我们创建了一个Html File控件，并为其设置了一个id。然后，我们创建了一个按钮，当用户点击该按钮时，会调用`chooseFile()`函数。 在`chooseFile()`函数中，我们首先通过`document.getElementById()`方法获取到Html File控件，并调用其`click()`方法触发文件选择对话框。接着，我们添加了一个`change`事件监听器，当用户选择文件后，会触发该监听器，并获取到所选择的文件对象。在这里，你可以对文件进行任何你想要的操作。 注意，为了保证浏览器的兼容性，我们没有直接调用`input`元素的`click()`方法，而是通过`addEventListener()`方法来添加事件监听器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值