有没有办法使用Backbone.js和它的模型架构,我可以将formdata对象发送到服务器？我遇到的问题是Backbone发送的所有内容都被编码为JSON,因此formdata对象未正确发送(显然).

我正在通过制作一个直接的jQuery ajax请求并将formdata对象作为数据属性来暂时解决这个问题,但这不太理想.

我使用jQuery文件上传库(http://github.com/blueimp/jQuery-File-Upload),我一直停留搞清楚如何利用图书馆满足以下条件.

• 该页面具有由表单标记包围的多个文件输入字段.
• 用户可以将多个文件附加到每个输入字段
• 单击按钮时,所有文件都将发送到服务器,而不是在将文件附加到输入字段时.
• 上传是异步完成的
• 假设页面有3个输入字段,其名称属性为"file1 []","file2 []"和"file3 []",请求有效负载应该像{file1:[file1 []上的文件数组],file2 :[file2 []]上的文件数组,...}

这是jsFiddle,它到目前为止表现得很奇怪,因为它发送了两次post请求,第一个被取消了.

更新

现在感谢@CBroe的评论,请求发送两次的问题是固定的.但是,请求参数的键未正确设置.这是更新的jsFiddle.

http://jsfiddle.net/BAQtG/27/

js代码的核心部分看起来像这样.

$(document).ready(function(){
    var filesList = []
    var elem = $("form")
    file_upload = elem.fileupload({
        formData:{extra:1},
        autoUpload: false,
        fileInput: $("input:file"),
    }).on("fileuploadadd", function(e, data){
        filesList.push(data.files[0])
    });

    $("button").click(function(){
        file_upload.fileupload('send', {files:filesList} )
    })

})

任何人都知道如何让这个工作？

我需要使用ajax和FormData发送一些数据,因为我想发送一个文件和一些其他参数.我通常发送数据的方式是这样的:

$.ajax({
    type:       'POST',
    url:        'some_url',
    dataType:   'json',
    processData:false,
    contentType:false,
    data:{
        Lvl_1-1: 'something',
        Lvl_1-2: 'something',
        Lvl_1-3: {
            Lvl_1-3-1: "something",
            Lvl_1-3-2: "something",
            Lvl_1-3-3: "something",
        },
    },
    ...
});

如果我不使用FormData(),我没有问题,但是当使用FormData()时,只有Lvl1上的数据是可以的,但是嵌套的任何东西都显示为像这样的字符串

<b>array</b> <i>(size=3)</i>
    'Lvl1-1' <font color='#888a85'>=&gt;</font> <small>string</small> 
        <font color='#cc0000'>'Something'</font> 
        <i>(length=23)</i>
    'Lvl1-2' <font color='#888a85'>=&gt;</font> <small>string</small> 
        <font color='#cc0000'>''Something''</font> <i>(length=3)</i>
    'Lvl1-3' <font color='#888a85'>=&gt;</font> <small>string</small> 
        <font color='#cc0000'>'[object Object]'</font> <i>(length=17)</i>

如果我使用FormData()来编码Lvl1-3中的数据,而不是[object Object]我得到[object FormData]

如何在Lvl1-3上获取数组而不是字符串？

注意:如果文件位于顶层(Lvl_1),我可以使用FormData()发送文件没有问题.我没有编写附加文件的代码,因为这不是问题,嵌套数据是.我刚刚提到了该文件,因为这就是我使用FormData()的原因.

让我们直接进入代码:

var formData = new FormData();

formData.append('name', dogName);
formData.append('weight', dogWeight);
formData.append('activity', dogActivity);
formData.append('age', dogAge);
formData.append('file', document.getElementById("dogImg").files[0]);
console.log(formData);

在这里,我将一些字符串和一个文件对象附加到formData对象,以便将所有信息异步发送到服务器.

在那之后,我有这个jquery ajax请求:

$.ajax({
  type: "POST",
  url: "/foodoo/index.php?method=insertNewDog",
  data: formData,
  processData: false,
  contentType: false,
  success: function(response){
     console.log(response);
  },
  error: function(){
  }
});

所以在这里我试图将信息发布到服务器上,在服务器上的php文件中我有一个简单的POST的POST文件,所以我看到了什么通过,什么没有.

不幸的是我在console.log(data)中的响应是空的.

此外,如果您在"网络"选项卡中选中"HEADER",则会得到以下空输出:

调用成功函数(仅用于澄清)

我正在开发一个项目，需要在提交之前更改 FormData。我无法更改元素值，我必须更改进入 POST 的实际 FormData。

我尝试更改 form.onsubmit 来更新值（适用于某些字段，但其他字段由于验证检查而不起作用）

<form name="aspnetForm" method="post" action="Posturl.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm" autocomplete="off">
   <input type="text" name="field1" id="field1" value="">
   <input type="text" name="field2" id="field2" value="">
</form>

我知道我可以创建一个新的 FormData 对象，并且可以使用 formData.set('field1', 'newValue') 设置该对象的值，但我不确定如何 POST 这个新的 FormData 对象而不是旧对象。

我有多个(和动态)数量的输入type=file.

我想从中创建一个FormData对象.

我需要手动将它们附加到对象,因为我需要访问它们的文件名以插入数据库,因此需要指定文件名是这种格式:

myFormData.append(name,file,filename);

HTML

<form id="my_form" enctype="multipart/form-data">
    <input type="file" name="undefined" id="file_1" data-filename="image.jpg">
    <input type="file" name="undefined" id="file_2" data-filename="image2.jpg">
    <button>click</button>
</form>

jQuery的

var myFormData = new FormData();

$(document).on("click", "button", function(e) {
    e.preventDefault();
    var inputs = $("#my_form input");
    $.each(inputs,function(obj,v) {
        var file = v.files[0];
        var filename = $(v).attr("data-filename");
        var name = $(v).attr("id");
        myFormData.append(name, file, filename);
    });

    //alert(JSON.stringify(myFormData));
    console.log(myFormData);
});  

我认为对象没有正确构建,我无法正确查看对象的内容以确认这一点.

这是我在控制台中得到的:

的jsfiddle

http://jsfiddle.net/rwone/K7aMw/

我正在通过XMLHttpRequest输入HTML表单的数据发送POST请求.不受JavaScript干扰的表单将提交其编码为的数据application/x-www-form-urlencoded.

使用XMLHttpRequest,我想通过FormDataAPI 发送数据,这不起作用,因为它将数据视为编码为multipart/form-data.因此,我需要将数据作为查询字符串,正确转义,写入到send方法中XMLHttpRequest.

addEntryForm.addEventListener('submit', function(event) {
    // Gather form data
    var formData = new FormData(this);
    // Array to store the stringified and encoded key-value-pairs.
    var parameters = []
    for (var pair of formData.entries()) {
        parameters.push(
            encodeURIComponent(pair[0]) + '=' +
            encodeURIComponent(pair[1])
        );
    }

    var httpRequest = new XMLHttpRequest();
    httpRequest.open(form.method, form.action);

    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
                console.log('Successfully submitted the request');
            } …

不知何故我的 req.body 总是空的，也许你有一个想法：

这是我的服务器代码：

const Express = require('express');
const bodyParser = require('body-parser');

const app = new Express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.post('/save', (req, res) => {
  console.log(req.body)  // => {}
  res.send(req.body);
});

const env = process.env.NODE_ENV || 'production';
app.listen(3000, err => {
   if (err) { return console.error(err); }
   console.info(`Server running on http://localhost:${port} [${env}]`);
});

当我尝试使用 javascript 发送 formdata 时，req.body 为空：

const data = new FormData(document.querySelector('form'));
console.log(data);  // seems empty already??? FormData{}??
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:3000/save');
xhr.send(data); …

我上传文件FORMDATA在角7使用此代码HttpClient为http:

sendImageFile(subUri: string, id: number, fileToUpload: File): Observable<any> {
  const formData: FormData = new FormData();
  formData.append('file', fileToUpload, fileToUpload.name);
  formData.append('photoalbum_id', id.toString() );
  // ... some other .append()

  const customHeaders = new HttpHeaders({
    'Authorization': 'Bearer' + localStorage.getItem('token'),
    'Accepted-Encoding': 'application/json'
  });

  const customOptions = {
    headers: customHeaders,
    reportProgress: true
  };

  return this.http.post(this.url, formData, customOptions)
    .pipe(
      map( (event: HttpEvent<any>) => this.getEventMessage(event, fileToUpload)),
      tap(message => this.showProgress(message)),
      // last(),
      catchError(this.handleError));
}

private showProgress(message: any) {
  // ...
}

private getEventMessage(event: HttpEvent<any>, file: …

我的 html 表单有多个具有相同name属性的复选框：

<form id='cheese-selector'>
  <input type="checkbox" name="cheese" id="limburger" value="Limburger">Limburger</input>
  <input type="checkbox" name="cheese" id="camembert" value="Camembert">Camembert</input>
  <input type="checkbox" name="cheese" id="roquefort" value="Roquefort">Roquefort</input>
  <input type="submit" id="pick-cheese">Pick My Cheese!</input>
</form>

我是通过ajax提交的。当我创建一个FormData对象时，即使我检查了多个复选框，也仅包含第一个选定的复选框：

$('#limburger').click()
$('#camembert').click()
console.log(FormData(this).get('cheese'))
// 'Limburger'

如何将FormData所有检查的值编码为数组？