Question

我尝试将浏览按钮和提交按钮组合在一起。单击按钮时，我可以选择文件。

但该文件未上传

这是表格

HTML：

public int sumAllDigits(int number) {
    int sum = number % 10;

    if(number/10 < 10){
        return sum + number/10;
    }else{
        return sum + sumAllDigits(number/10);
}

JQuery的

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"])?>" method="post" id="myform" enctype="multipart/form-data">
    <input type="file" name="upload" id="upload" style="display:none">
    <button id="browse">Upload</button>
</form>

然后我提交了数据

PHP：

$(document).ready(function(){
        $("#upload").change(function(){
                $("#myform").submit();
        });
        $("#browse").click(function(){
        $("#upload").click();
        });

    });

我输出为4。这意味着没有上传文件。如何解决此问题？

Answer 1

有一种简单而优雅的方式来实现这一目标。

将type =“submit”添加到按钮，因为并非所有网络浏览器都使用“提交”作为默认按钮类型
添加在“提交”事件被引发时触发的表单事件侦听器

示例代码：

$(document).ready(function(){
  
  $('#myform').submit(function(e) {
    
    // Remove following two lines in order to perform the submission
    // I added the two lines in order to avoid the real submission (Test purposes)
    e.preventDefault(); 
    alert('Submitted!')
    
  })
  
  $("#upload").change(function(){
    $("#myform").submit();
  }); 

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="example.html" method="post" id="myform" enctype="multipart/form-data">
    <input type="file" name="upload" id="upload">
    <button id="browse">Upload</button>
</form>

请记住删除我为了执行代码段而包含的“preventDefault”和“alert”行，而不会将您重定向到其他页面。

当提交按钮和浏览按钮被单个按钮替换时，无法上传文件

1 个答案: