我正在try 从不同的输入文件框上载两个文件,而不使用JQuery、AJAX和PHP刷新页面.问题是文件没有上传,可能是因为我的格式.附加这两个文件或我在AJAX中定义"数据"的方式.

这是我的HTML表单

     <form>
          <div class="col col-sm-12 mb-2">
              <label class="form-label">Cover Image</label>
              <input type="file" class="form-control" name="coverImage" id="coverImage">
          </div>
          
          <div class="col col-sm-12">
              <label class="form-label">File to Embed</label>
              <input type="file" class="form-control" name="fileToEmbed" id="fileToEmbed">
          </div>
      <button type="button" class="btn btn-primary" name="steganize" id="steganize">STEGANIZE</button>
          </form>

这是我try 过的代码.

$('#steganize').click(function(){
var file = $('#coverImage').prop("files")[0];
            var form = new FormData();
            form.append("coverImage", file);

            var file2 = $('#fileToEmbed').prop("files")[0];
            var form2 = new FormData();
            form2.append("fileToEmbed", file2);

            $.ajax({
                url: "steganize.php",
                type: "POST",
                data:  {form, form2},
                contentType: false,
                processData:false,
                success: function(result){
                    console.log(result);
                }
            });
});

也试过这个

$('#steganize').click(function(){
            var file = $('#coverImage').prop("files")[0];
            var file = $('#fileToEmbed').prop("files")[1];
            var form = new FormData();
            form.append("coverImage", file);

            $.ajax({
                url: "steganize.php",
                type: "POST",
                data:  form,
                contentType: false,
                processData:false,
                success: function(result){
                    console.log(result);
                }
            });

        });

不幸的是,这两者都不起作用.那么你知道正确的写作方法吗?我做这件事已经有好几个小时了.如果你能帮助我,请提前感谢.

推荐答案

在AJAX请求中只能发送一个FormData对象,因此第二个示例接近正确.问题是您重新定义了file变量,并且只附加了一个值.

此外,由于使用[1],您获取了在fileToEmbed个输入中 Select 的second个文件-我假设您的意思是获取第一个文件.

正确的代码应如下所示:

$('#steganize').click(function() {
  var coverImage = $('#coverImage').prop("files")[0];
  var fileToEmbed = $('#fileToEmbed').prop("files")[0];
  
  var form = new FormData();
  form.append("coverImage", coverImage);
  form.append("fileToEmbed", fileToEmbed);

  $.ajax({
    url: "steganize.php",
    type: "POST",
    data: form,
    contentType: false,
    processData: false,
    success: function(result) {
      console.log(result);
    }
  });
});

Jquery相关问答推荐

如何在 jQuery 中 Select 特定的表单元素?

Twitter Bootstrap 是否包含 jQuery?

在页面上放置文件时如何设置文件输入值?

使用 jQuery 为 box-shadow 设置动画的正确方法

Jquery Ajax,从 mvc.net 控制器返回成功/错误

jQuery从下拉列表中删除一个选项,给定选项的文本/值

如何在循环内创建动态变量名称?

如何在 Slick 轮播项目之间添加空格

JQuery手风琴自动高度问题

如何使用 jQuery 获取 div 的当前类?

jQuery获取表单字段值

你如何获得文本区域中的光标位置?

jquery-ui datepicker更改z-index

使用 jQuery 将宽度设置为百分比

Javascript 使用哈希值重新加载页面

与 C# HashSet 等效的 JavaScript 是什么?

带有回调ajax json的jQuery自动完成

删除除一个之外的所有类

只绑定一次事件

如何禁用由子元素触发的 mouseout 事件?