js代码 表单提交多文件并页面显示文件

上传的文件可以通过 FormData 对象来实现，具体代码如下：

HTML 代码：

<form id="myForm">
  <input type="file" name="file1">
  <input type="file" name="file2">
  <input type="submit" value="提交">
</form>

JavaScript 代码：

var form = document.getElementById('myForm');
var formData = new FormData(form);

// 发送请求
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.send(formData);

// 显示上传的文件
var files = form.elements['file1'].files;
for (var i = 0; i < files.length; i++) {
  var file = files[i];
  console.log(file.name);
}

这段代码可以实现在表单中上传多个文件，并在页面上显示上传的文件名。

相关问题

表单提交后避免页面刷新的代码实例

以下是一个表单提交后避免页面刷新的代码实例：

$(document).ready(function(){
  $("form").submit(function(e){
    e.preventDefault(); // 阻止表单的默认提交行为
    $.ajax({
      url: "submit.php", // 要提交的表单处理文件
      method: "POST", // 提交方式为POST
      data: $("form").serialize(), // 把表单中的所有数据序列化为字符串
      success: function(response){
        // 表单提交成功后的处理逻辑
        alert(response); // 弹窗提示提交成功的响应结果
      },
      error: function(){
        // 表单提交失败后的处理逻辑
        alert("提交失败，请稍后再试！");
      }
    });
  });
});

这段代码利用 jQuery 的 ajax 方法实现了在不刷新页面的情况下提交表单数据，并且根据提交结果进行相应的处理。

jqueryform表单提交实现下载文件

要实现jqueryform表单提交下载文件，可以采用以下步骤：

1. 在前端页面中添加一个表单，用于提交下载文件的请求。

2. 使用jqueryform插件将表单序列化并发送到后台。

3. 后台接收到请求后，根据表单中的参数生成需要下载的文件，并将文件保存到服务器端。

4. 后台将生成的文件路径返回给前端。

5. 前端使用window.open()方法打开返回的文件路径即可实现文件下载。

以下是示例代码：

前端代码：

<form id="downloadForm" action="/downloadFile" method="post">
    <input type="hidden" name="fileName" value="example.txt">
    <input type="hidden" name="fileContent" value="This is an example file.">
    <input type="submit" value="Download">
</form>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
<script>
    $(document).ready(function(){
        $("#downloadForm").submit(function(e){
            e.preventDefault();
            $(this).ajaxSubmit({
                success: function(data){
                    window.open(data);
                }
            });
        });
    });
</script>

后台代码：

@RequestMapping(value = "/downloadFile", method = RequestMethod.POST)
@ResponseBody
public String downloadFile(@RequestParam("fileName") String fileName,
                           @RequestParam("fileContent") String fileContent,
                           HttpServletRequest request,
                           HttpServletResponse response) throws Exception {
    // 生成文件并保存到服务器端
    String filePath = "/path/to/file/" + fileName;
    File file = new File(filePath);
    FileWriter writer = new FileWriter(file);
    writer.write(fileContent);
    writer.flush();
    writer.close();

    // 返回文件路径
    return filePath;
}