使用单个按钮将多个输入文件输出到不同的ID

简而言之，

以下是我要完成的工作： http ： //jsfiddle.net/n3r8conn/8/

但是如图所示，我遇到了问题，它将按以下方式工作：用户点击按钮一次，文件从输入中选择，然后显示在files_1 id中，用户再次点击按钮，文件被选中，然后输出到files_id2，

此部分仅显示上传部分，换句话说，除了在屏幕上显示图像之外，上面提到的所有内容。

Html COde：

    From Device      

JavaScript代码：

 $('#uploadDevice').click(function(){ myGlobalCounter++; $( '#files_' +myGlobalCounter ).val('Secret text ' + myGlobalCounter); }); 

CSS代码：

  .uploadDevice{ visibility : hidden; } 

更新：

             
 
      From Facebook  
 
     From Device    
 
  .uploadDevice{ visibility : hidden; }   $("#buttonFile").click(function(){ $("#files").trigger('click'); });  

脚本

 function handleFileSelect(evt) { var $fileUpload = $("input#files[type='file']"); if (this.files.length > 4) { alert("You can only upload a maximum of 5 files"); evt.preventDefault(); evt.stopPropagation(); return false; } var files = this.files; for (var i = 0, f; f = files[i]; i++) { if (!f.type.match('image.*')) { continue; } (function(i){ var reader = new FileReader(); reader.onload = (function (theFile) { return function (e) { var span = document.createElement('span'); span.innerHTML = [''].join(''); document.getElementById('profilePic' + (i + 1)).appendChild(span); }; })(f); reader.readAsDataURL(f); })(i); } } document.getElementById('files').addEventListener('change', handleFileSelect, false);  

Answer 1

这是第三个答案的另一个版本。

这个只是在您单击它之后移动每个FILE INPUT，因此您可以看到下一个FILE INPUT现在已被点击。

基本上，我没有使用z-index将刚刚单击的FILE INPUT旋转到堆栈的底部，而是将其向下移动到页面，以便您可以直观地看到发生了什么。

jsFiddle演示

码：

 var xx, global_cnt = 1; $('#clicker').button(); //use jQueryUI to auto-style the button $('div').click(function(){ xx = global_cnt * 60; $('#real_uploader_' +global_cnt).css({'position':'absolute','top':xx+'px'}); global_cnt++; if ( $('#real_uploader_' +global_cnt).length ){ $('#real_uploader_' +global_cnt).css('z-index','2'); } }); 

Answer 2

像这样的东西？

jsFiddle演示

HTML：

javasccript / jQuery的：

 var myGlobalCounter = 0; $('#mybutt').click(function(){ myGlobalCounter++; $( '#typeHidden_' +myGlobalCounter ).val('Secret text ' + myGlobalCounter); }); $('#nutherbutt').click(function(){ for (n=1; n<= myGlobalCounter; n++){ var tmp = $('#typeHidden_' +n).val(); alert( tmp ); } }); 

Answer 3

我道歉 – 第一次我没有仔细阅读你的答案。

元素是特殊的。 出于安全原因，使用javascript来控制文件输入元素的function很少。 您无法以编程方式设置文件名，也无法以编程方式单击该按钮。

但是，经常提出一种解决方法：

HTML：

 
 Upload File   

CSS：

 div{display:block;width:100px;height:20px;overflow:hidden;} button{width:110px;height:30px;position:relative;top:-5px;left:-5px;} input{font-size:50px;width:120px;opacity:0;filter:alpha(opacity:0); position:relative;top:-40px;left:-20px;background:yellow;} 

非工作jsFiddle与代码

---

参考文献：

在JavaScript中，我可以以编程方式为文件输入元素触发“单击”事件吗？

以编程方式设置type =“file”输入HTML元素的值？

Answer 4

让我再尝试一次。

我很难理解你的需求。 如果我能理解这一点，那么我很确定我可以提供帮助。

请检查这是否是您需要的。

此代码具有3个元素。 所有3都是“不可见的” （使用不透明度，它们保持在屏幕上的位置，它们只是不可见）。

FILE输入也堆叠在一起。 在开始时，input_1位于顶部—但它是不可见的，所以你看到的只是它下方的按钮。

当点击“按钮”（实际上是input_1）时，会发生三件事：

（1）为input_1显示OPEN对话框（选择要上载的文件）

（2）global_cnt用于将input_1移动到后面（使用z-index）

（3）global_cnt递增，然后再次用于将input_2移动到前面

（4）global_cnt现在处于正确的数字，以便在单击时将input_2移回

每次用户单击“按钮”（实际上，它们单击不可见的input type="file"元素）时，不同的输入元素将移动到顶部。 因此，通过单击相同的“按钮”，用户继续上载到不同的文件输入。

注意：这是有效的，因为当您单击input_1 ， div也会获得click事件（通过事件冒泡）。

jsFiddle演示代码

码：

HTML：

使用Javascript / jQuery的：

 var global_cnt = 1; $('#clicker').button(); //use jQueryUI to auto-style the button $('div').click(function(){ if ( $('real_uploader_' +global_cnt).length ) $('real_uploader_' +global_cnt).css('z-index','-1'); global_cnt++; if ( $('real_uploader_' +global_cnt).length ) $('real_uploader_' +global_cnt).css('z-index','2'); }); 

还在努力