如何发布文件和输入字符串数据FormData()？例如,我有许多其他隐藏的输入数据,我需要将它们发送到服务器,
HTML,
<form action="image.php" method="post" enctype="multipart/form-data">
<input type="file" name="file[]" multiple="" />
<input type="hidden" name="page_id" value="<?php echo $page_id;?>"/>
<input type="hidden" name="category_id" value="<?php echo $item_category->category_id;?>"/>
<input type="hidden" name="method" value="upload"/>
<input type="hidden" name="required[category_id]" value="Category ID"/>
</form>
使用下面的代码我只管理发送文件数据而不是隐藏的输入数据.
jQuery的,
// HTML5 form data object.
var fd = new FormData();
var file_data = object.get(0).files[i];
var other_data = $('form').serialize(); // page_id=&category_id=15&method=upload&required%5Bcategory_id%5D=Category+ID
fd.append("file", file_data);
$.ajax({
url: 'add.php',
data: fd,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
server.php …
我正在尝试从Web表单中获取一组键(输入名称或类似名称)和值(输入值):
<body>
<form>
<input type="text" name="banana" value="swag">
</form>
<script>
var form = document.querySelector('form');
var formData = new FormData(form);
</script>
</body>
根据FormData文档,formData应该包含表单中的键和值.但console.log(formData)节目formData是空的.
如何使用FormData快速从表单中获取数据？
我只是在寻找一种方式来获得所有的值从<form>.
我在网上搜索了一会儿,磕磕绊绊FormData,这似乎正是我正在寻找的.
但是它的API 在任何浏览器上都不可用,所以我需要一个替代方案.
在我的具体情况下我需要的是键/值对的对象.例如:
<form>
<input type="text" name="firstname" value="John" />
<input type="text" name="surname" value="doe" />
<input type="email" name="email" value="" />
<input type="radio" name="gender" value="male" />
<input type="radio" name="gender" value="female" />
</form>
对象应该是:
{
firstname: "John",
surname: "doe",
email: "",
gender: ""
}
编辑:上面只是一个例子,它不仅应该<input>与其他标签一起工作(例如<select>,<textarea>等等......甚至<input type="file">应该支持).
谢谢你的光临.
我想送new FormData()的body一个的POST使用请求提取API
操作看起来像这样
var formData = new FormData()
formData.append('myfile', file, 'someFileName.csv')
fetch('https://api.myapp.com',
{
method: 'POST',
headers: {
"Content-Type": "multipart/form-data"
},
body: formData
}
)这里的问题是边界,类似的东西
boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu
从来没有进入Content-Type:标题
它看起来应该是这样的
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu
当你用a尝试"相同"的操作时new XMLHttpRequest(),就像这样
var request = new XMLHttpRequest()
request.open("POST", "https://api.mything.com")
request.withCredentials = true
request.send(formData)标题已正确设置
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu
所以我的问题是,
我如何使这种情况fetch完全像XMLHttpRequest？
如果这不可能,为什么？
谢谢大家!这个社区或多或少是我取得职业成功的原因.
最近我使用AJAX提交表单.
在研究最好的方法时,我看到了一些AJAX提交使用.serialize()和其他使用FormData.例如.
一份意见书做了这个:
data: form.serialize()
而另一个做了:
var formData = new FormData($('form')[0]);
data: formData
那么FormData和之间的区别是什么.serialize()？
可以将元素的.files属性设置为例如来自不同的元素属性或属性.请参阅Make .files settable#2866,将文件上传到HTML表单并提交之间会发生什么？.<input type="file">FileList<input type="file">.filesDataTransfer.files
FileList对象有一个Symbol.iterator属性,我们可以使用它来设置一个File可迭代的对象,但是.files .length仍然设置为0并传递一个<form>有<input type="file">用于.files使用上述方法设置的集合,产生一个设置为的File对象..size0
如何设置Fileat FileList和set设置.length的FileList文件数,文件在FormData()object 设置的位置？
const input = document.createElement("input");
const form = document.createElement("form");
const [...data] = [
new File(["a"], "a.txt")
, new File(["b"], "b.txt")
];
input.type = "file";
input.name = "files";
input.multiple = true;
// …我有一个有两个input text和一个的表格upload.我必须将它发送到服务器,但我有一些问题连接文件与文本.服务器期望这个答案:
"title=first_input" "text=second_input" "file=my_file.pdf"
这是html:
<input type="text" ng-model="title">
<input type="text" ng-model="text">
<input type="file" file-model="myFile"/>
<button ng-click="send()">
这是控制器:
$scope.title = null;
$scope.text = null;
$scope.send = function(){
var file = $scope.myFile;
var uploadUrl = 'my_url';
blockUI.start();
Add.uploadFileToUrl(file, $scope.newPost.title, $scope.newPost.text, uploadUrl);
};
这是指令 fileModel:
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
这就是服务 …
我需要上传文件发送额外的参数.
我在stackoverflow中找到了以下帖子:带有额外参数的Webapi ajax formdata上传
它描述了如何使用MultipartFormDataStreamProvider并将数据保存到文件服务器.我不需要将文件保存到服务器,而是保存到DB.我已经使用MultipartMemoryStreamProvider处理代码,但它不使用额外的参数.
你能告诉我如何在webapi中处理额外的参数吗？
例如,如果我添加文件并测试参数:
data.append("myParameter", "test");
这是我的webapi处理fileupload而没有额外的参数:
if (Request.Content.IsMimeMultipartContent())
{
var streamProvider = new MultipartMemoryStreamProvider();
var task = Request.Content.ReadAsMultipartAsync(streamProvider).ContinueWith<IEnumerable<FileModel>>(t =>
{
if (t.IsFaulted || t.IsCanceled)
{
throw new HttpResponseException(HttpStatusCode.InternalServerError);
}
_fleDataService = new FileDataBLL();
FileData fle;
var fleInfo = streamProvider.Contents.Select(i => {
fle = new FileData();
fle.FileName = i.Headers.ContentDisposition.FileName;
var contentTest = i.ReadAsByteArrayAsync();
contentTest.Wait();
if (contentTest.Result != null)
{
fle.FileContent = contentTest.Result;
}
// get extra parameters here ??????
_fleDataService.Save(fle);
return new FileModel(i.Headers.ContentDisposition.FileName, 1024); //todo
}); …是否可以将嵌套对象附加到FormData?
let formData = new FormData();
let data = {
title: 'title',
text: 'text',
preview: {p_title:'p title', p_text: 'p text'}
};
$.each(data, function(key, value) {
formData.append(key, value);
});
服务器控制台- console.log(req.body)
{
title: 'title',
text: 'text',
preview: '[object Object]'
}
我怎样才能得到 的确切值preview: {p_title:'p title', p_text: 'p text'}？
我有一个FormData对象,我javascript从这样的HTML形式创建.该FormData对象似乎没有很好的文档(它可能只是我搜索错误的东西!).
var form = new FormData(document.getElementById("form"));
我的问题
FormData在发送之前如何访问此对象的不同输入值？例如.form.name使用名称访问输入到输入的值form.name.