Ajax 上传文件(input file FormData)
FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。
jQuery Ajax 上传文件
通过 Ajax 向后台发送文件(包括图片)时,其参数类型属于对象。可以创建一个 FormData 对象,然后调用它的 append() 方法来添加字段。
例如:
var formData = new FormData();
formData.append("username", "cedric");
formData.append("tel", 15866666666); //数字123456会被立即转换成字符串 "15866666666"
// HTML 文件类型input,由用户选择
formData.append("userfile", fileInputElement.files[0]);
实例应用
- html代码
<div class="form-group">
<label for="upload_crowd_name" class="col-sm-2 control-label">人群名称</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="upload_crowd_name" placeholder="请输入人群名称">
</div>
</div>
<div class="form-group">
<label for="upload_crowd_desc" class="col-sm-2 control-label">人群说明</label>
<div class="col-sm-10">
<textarea class="form-control" id="upload_crowd_desc" cols="20" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<label for="crowd_file" class="col-sm-2 control-label">上传文件</label>
<div class="col-sm-10">
<input type="file" accept=".xlsx" id="crowd_file">
</div>
</div>
- js代码
$('.submit').click(function () {
var crowd_name = $.trim($('#upload_crowd_name').val());
var crowd_desc = $.trim($('#upload_crowd_desc').val());
var crowd_file = $('#crowd_file')[0].files[0];
var formData = new FormData();
formData.append("crowd_file",$('#crowd_file')[0].files[0]);
formData.append("crowd_name", crowd_name);
formData.append("crowd_desc", crowd_desc);
$.ajax({
url:'/upload/',
dataType:'json',
type:'POST',
async: false,
data: formData,
processData : false, // 使数据不做处理
contentType : false, // 不要设置Content-Type请求头
success: function(data){
console.log(data);
if (data.status == 'ok') {
alert('上传成功!');
}
},
error:function(response){
console.log(response);
}
});
})
参考:
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
分类:
JavaScript
, HTML
标签:
JavaScript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构