Fatal编程技术网
  • javascript/
  • Javascript 使用单个按钮将多个输入文件输出到不同的id

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

javascript jquery css html

Javascript 使用单个按钮将多个输入文件输出到不同的id,javascript,jquery,css,html,Javascript,Jquery,Css,Html,简言之 以下是我试图实现的目标： 但如图所示，我遇到了一些问题，其工作原理如下： 用户单击按钮一次，文件从输入中被选中，然后显示在文件\u 1 id中，用户再次单击按钮，文件被选中，然后输出到文件\u id2中 这部分只显示上传部分，换句话说，除了在屏幕上显示图像之外，上面提到的所有内容 Html代码： <button id="uploadDevice" class="button button-block button-positive"> <i

简言之

以下是我试图实现的目标：

但如图所示，我遇到了一些问题，其工作原理如下： 用户单击按钮一次，文件从输入中被选中，然后显示在文件\u 1 id中，用户再次单击按钮，文件被选中，然后输出到文件\u id2中

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

Html代码：

 <button id="uploadDevice" class="button button-block button-positive">
            <i class="icon ion-android-mail"></i> &nbsp; <text id="textBtn1">From Device </text>
</button>
                <input type="file" class="uploadDevice" id="files_1" name="image_file_arr[]" multiple>
                <input type="file" class="uploadDevice" id="files_2" name="image_file_arr[]" multiple>
                <input type="file" class="uploadDevice" id="files_3" name="image_file_arr[]" multiple>
CSS代码：

 .uploadDevice{
     visibility : hidden;
  }
更新：

<ion-content>
    <ion-slide-box id="uploadedPictures" on-slide-changed="slideHasChanged($index)">
          <ion-slide>

<output id="profilePic1"></output>

  </ion-slide>
          <ion-slide>
<output id="profilePic2"></output>

  </ion-slide>
          <ion-slide>
<output id="profilePic3"></output>

  </ion-slide>
</ion-slide-box>


<div class="row">
<div class="col col-50">
     <button id="uploadFacebook" class="button button-block button-positive">
         <i class="icon ion-social-facebook"></i> &nbsp; <text id="textBtn1"> From Facebook 
</button>
</div>         



<div class="col col-50"><a href="javascript:void(0)" id="buttonFile" href=""> 
 <button id="uploadDevice" class="button button-block button-positive">
            <i class="icon ion-android-mail"></i> &nbsp; <text id="textBtn1">From Device </text>
</button></a>
                <input type="file" class="uploadDevice" id="files" name="image_file_arr[]" multiple>


    </div>
  </div>

  <style>
  .uploadDevice{
     visibility : hidden;
  }
  </style>

  <script>
  $("#buttonFile").click(function(){
        $("#files").trigger('click');
    });

    </script>


来自Facebook
.上传设备{
可见性：隐藏；
}
$（“#按钮文件”）。单击（函数（）{
$（“#文件”）.trigger（'click'）；
});
剧本 

功能手柄文件选择（evt）{
var$fileUpload=$（“输入#文件[type='file']）；
如果（this.files.length>4）{
警报（“您最多只能上载5个文件”）；
evt.preventDefault（）；
evt.stopPropagation（）；
返回false；
}
var files=this.files；
for（var i=0，f；f=files[i]；i++）{
如果（！f.type.match（'image.*'））{
继续；
}
（职能（一）{
var reader=new FileReader（）；
reader.onload=（函数（文件）{
返回函数（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）；
像这样的东西

HTML:

<input type="text" class="th" id="typeHidden_1" />
<input type="text" class="th" id="typeHidden_2" />
<input type="text" class="th" id="typeHidden_3" />
<input type="text" class="th" id="typeHidden_4" />
<input type="button" id="mybutt" value="Show Me" />
<input type="button" id="nutherbutt" value="Read Hidden Field" />

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 );
    }
});

<div>
    <button><a href="javascript: void(0)">Upload File</a></button>
    <input type="file" id="upload_input" name="upload" />
</div>

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;}

<div>
    <input type="button" id="clicker" value="Upload File" />
    <input type="file" class="hidden_uploaders" id="real_uploader_1" name="upload_1" />
    <input type="file" class="hidden_uploaders" id="real_uploader_2" name="upload_2" />
    <input type="file" class="hidden_uploaders" id="real_uploader_3" name="upload_3" />
</div>

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');
});
JavaScript/jQuery:

<input type="text" class="th" id="typeHidden_1" />
<input type="text" class="th" id="typeHidden_2" />
<input type="text" class="th" id="typeHidden_3" />
<input type="text" class="th" id="typeHidden_4" />
<input type="button" id="mybutt" value="Show Me" />
<input type="button" id="nutherbutt" value="Read Hidden Field" />

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 );
    }
});

<div>
    <button><a href="javascript: void(0)">Upload File</a></button>
    <input type="file" id="upload_input" name="upload" />
</div>

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;}

<div>
    <input type="button" id="clicker" value="Upload File" />
    <input type="file" class="hidden_uploaders" id="real_uploader_1" name="upload_1" />
    <input type="file" class="hidden_uploaders" id="real_uploader_2" name="upload_2" />
    <input type="file" class="hidden_uploaders" id="real_uploader_3" name="upload_3" />
</div>

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');
});

var myGlobalCounter=0；
$（'#mybutt'）。单击（函数（）{
myGlobalCounter++；
$（'#typeHidden'+myGlobalCounter.val（'secrettext'+myGlobalCounter））；
});
$（'#nutherbutt'）。单击（函数（）{
因为（n=1；n我道歉——我第一次没有仔细阅读你的答案


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

然而，有一个经常被提出的解决办法：

HTML:


<input type="text" class="th" id="typeHidden_1" />
<input type="text" class="th" id="typeHidden_2" />
<input type="text" class="th" id="typeHidden_3" />
<input type="text" class="th" id="typeHidden_4" />
<input type="button" id="mybutt" value="Show Me" />
<input type="button" id="nutherbutt" value="Read Hidden Field" />



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 );
    }
});



<div>
    <button><a href="javascript: void(0)">Upload File</a></button>
    <input type="file" id="upload_input" name="upload" />
</div>



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;}



<div>
    <input type="button" id="clicker" value="Upload File" />
    <input type="file" class="hidden_uploaders" id="real_uploader_1" name="upload_1" />
    <input type="file" class="hidden_uploaders" id="real_uploader_2" name="upload_2" />
    <input type="file" class="hidden_uploaders" id="real_uploader_3" name="upload_3" />
</div>



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');
});






参考资料：



让我再试一次

我很难理解你需要什么。如果我能解决这个问题，我相信我能帮上忙

请检查这是否是您需要的

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

文件输入也堆叠在彼此的顶部。开始时，输入_1位于顶部，但它是不可见的，因此您只能看到它下面的按钮

单击“按钮”（实际上是输入1）时，会发生三件事：

（1） 将显示输入_1的“打开”对话框（选择要上载的文件）

（2） 全局_cnt用于将输入_1移到后面（使用z索引）

（3） 全局_cnt递增，然后再次用于将输入_2移动到前面

（4） 全局_cnt现在处于正确的编号，以便在单击输入_2时将其向后移动

每次用户单击“按钮”（实际上，他们单击的是一个不可见的
input type=“file”
元素），一个不同的输入元素就会移到顶部。因此，通过单击同一个“按钮”，用户会不断上传到不同的文件输入

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



代码：

HTML:


<input type="text" class="th" id="typeHidden_1" />
<input type="text" class="th" id="typeHidden_2" />
<input type="text" class="th" id="typeHidden_3" />
<input type="text" class="th" id="typeHidden_4" />
<input type="button" id="mybutt" value="Show Me" />
<input type="button" id="nutherbutt" value="Read Hidden Field" />



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 );
    }
});



<div>
    <button><a href="javascript: void(0)">Upload File</a></button>
    <input type="file" id="upload_input" name="upload" />
</div>



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;}



<div>
    <input type="button" id="clicker" value="Upload File" />
    <input type="file" class="hidden_uploaders" id="real_uploader_1" name="upload_1" />
    <input type="file" class="hidden_uploaders" id="real_uploader_2" name="upload_2" />
    <input type="file" class="hidden_uploaders" id="real_uploader_3" name="upload_3" />
</div>



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');
});



仍在研究这个问题，这是第三个答案的另一个版本

这一步只需在单击每个文件输入后移动它，这样您就可以看到下一个文件输入现在已就位，可以单击

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



代码：


谢谢你的回复。类似这样的，但我使用的是输入类型文件，出于某种原因，我似乎遇到了一个错误。谢谢你的解释。让我们看看解决方法。我这里有一个输入文件，当用户选择一张图片时，它最多会以不同的ID显示3次。比如有3个输出，每个输出put与一个id有关，我的问题是它只输出到第一个id，而任何其他图片都在它旁边，而不是在另一个id。我在我的初始帖子中包含了一个更新——这可能不相关，但是——我知道的最有用的文件上传工具是Ravishanker Kusuma的
jQuery file Upload plugin
：好吧，这可能不是你要问的，但我重新设计（改进）了上面答案中的示例：@JonathanEtienne请看这个问题的第三个答案（也是由我提供的）--它可能更接近你想要的。@JonathanEtienne-哦，等等--如果图像比容器大，图像将不可见…也许这就是正在发生的事情。。。？