Javascript 不工作 (textbox.value = fileupload.value)

Question

代码的想法是创建一个单独的文本框和按钮，这样我就可以为每个创建类并使它们像文件上传一样工作。

但是 javascript 运行了两次，文件上传值被删除了。

<style type="text/css">
div.fileinputs
{
    position: relative;
}

div.fakefile
{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

input.file
{
   visibility:hidden;
}
</style>
<script type="text/javascript" language="javascript">
    function uploadFileChange() {
            alert("start");
            document.getElementById('FileName').value = document.getElementById("FileUpload1").value;
            alert("end");
    }
</script>
<div class="fileinputs" style="width: 50%;">
    <!-- Upload file invisivel-->
    <asp:FileUpload ID="FileUpload1" ClientIDMode="Static" class="file" runat="server" 
         onpropertychange="uploadFileChange();"  />
    <!-- button e textbox falsas para poder dar syles ao button-->
    <div class="fakefile">
        <asp:TextBox ID="FileName" CssClass="textbox" ClientIDMode="Static" runat="server" Width="31%" ></asp:TextBox>
        <asp:Button ID="FileChooserButton1" CssClass="btnSubmit" runat="server" Text="Procurar..."
            ForeColor="White" onClick="document.getElementeByID('FileUpload1').click()" />
    </div>
</div>

怎么了？？？提前致谢

Answer 1

对您的代码稍作修改，

<asp:Button ID="FileChooserButton1" CssClass="btnSubmit" runat="server" Text="Procurar..."             ForeColor="White" onClientClick="document.getElementeByID('FileUpload1').click();return false;" />

将 return false 写入 clickevent 将不会回发，您丢失 fileuplaod 值的原因是页面正在获得回发。

否则你可以试试这个，

<asp:Button ID="FileChooserButton1" CssClass="btnSubmit" runat="server" Text="Procurar..." ForeColor="White" onClientClick="CallClick();return false;" />

function CallClick(){
document.getElementeByID('FileUpload1').click();
return false;
}