Question

我有一个内置文件上传选项的简单联系表单。但是，它只有一个“浏览”按钮，我希望它是无限的。但是，不是多次复制“浏览”代码，我宁愿在用户使用旧的浏览按钮后创建一个新的浏览按钮（上传文件）。

如何实时创建另一个按钮？

以下是表单的完整演示：http://www.html-form-guide.com/files/contact-form/contact-form-attachment-1/contactform.php

表单的代码如下，我的问题与上传按钮有关。谢谢!!

<form id='contactus' action='<?php echo $formproc->GetSelfScript(); ?>' method='post' enctype="multipart/form-data" accept-charset='UTF-8'>

<fieldset >
<legend>Describe the issue:</legend>

<input type='hidden' name='submitted' id='submitted' value='1'/>
<input type='hidden' name='<?php echo $formproc->GetFormIDInputName(); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/>
<input type='text'  class='spmhidip' name='<?php echo $formproc->GetSpamTrapInputName(); ?>' />

<div class='short_explanation'>*All fields are required.</div>

<div><span class='error'><?php echo $formproc->GetErrorMessage(); ?></span></div>
<div class='container'>
    <label for='name' >Full Name: </label><br/>
    <input type='text' name='name' id='name' value='<?php echo $formproc->SafeDisplay('name') ?>' maxlength="50" /><br/>
    <span id='contactus_name_errorloc' class='error'></span>
</div>
<div class='container'>
    <label for='email' >Email Address:</label><br/>
    <input type='text' name='email' id='email' value='<?php echo $formproc->SafeDisplay('email') ?>' maxlength="50" /><br/>
    <span id='contactus_email_errorloc' class='error'></span>
</div>
<div class='container'>
    <label for='message' >Message:</label><br/>
    <span id='contactus_message_errorloc' class='error'></span>
    <textarea rows="10" cols="50" name='message' id='message'><?php echo $formproc->SafeDisplay('message') ?></textarea>
</div>
<div class='container'>
    <label for='photo' >Upload your file:</label><br/>
    <input type="file" name='photo' id='photo' /><br/>
    <span id='contactus_photo_errorloc' class='error'></span>
</div>


<div class='container'>
    <input type='submit' name='Submit' value='Submit' />
</div>

</fieldset>
</form>

Answer 1

假设您在html中有一个上传按钮，如下所示：

 <body>
    <form>
      <input type="file" name="upload1" id="upload1"/>
    </form>
</body>

然后，您可以使用Click在上一个按钮的jquery事件上添加另一个上传按钮：

$(function(){
    $('#upload1').on('click',function(){
        var r= $('<input type="file" value="new button"/>');
        $("form").append(r);
    });
});

JSFIDDLE DEMO HERE

如果您不熟悉如何使用Jquery，可以在这里学习：Learn jquery

如何实时生成新的上传按钮

1 个答案: