input type="file 将图片传给后台
今天需要做一个移动端的调查问卷,不止要提交标题,还需要提交配图。(黑人问号脸.jpg)
此时,对于一个菜鸡,无疑把我给难住了,问完度娘后选择使用new FormData()方法。
直接正片吧:
<a class="file">
<form enctype="multipart/form-data">
<input type="file" id="imgFile" name="files" accept="image/jpg,image/jpeg,image/png,image/PNG" />
</form>
</a>
var formFile = new FormData();
$('.file').change(function(){
var imgfile = document.querySelector('#imgFile');//获取input
var file = imgfile.files[0]; //获取文件对象
formFile.append("uploadFile", file); //加入文件对象
})
// 在其他函数内把其他的参数也添加进去,这里就举个栗子吧 ps:查看指定内容 formFile.get('sharereport.title')
删除指定内容 formFile.delete('sharereport.title')
formFile.append("sharereport.describes",sharereport.describes);
formFile.append("sharereport.username",sharereport.username);
formFile.append("sharereport.phones",sharereport.phones);
formFile.append("sharereport.title",sharereport.title);
//传给后台
$.ajax({
type:"post",
url:"",
data:formFile,
//是否预处理,默认值为true,这里改成false
processData:false,
//是否设置内容,默认值为true,这里改成false
contentType:false,
success:function(res){
alert('提交成功');
},
error:function(data){
alert('提交失败');
}
});
提交成功,数据成功传给后台
注意:提交后这些数据还保留在formFile里面。如果用户再操作就会有把原来的数据也发送出去,此时可以在alert()后formFile = new FormData();或者跳转页面以及关闭页面。
相关文章
- 微服务架构实战:商家管理后台与sso设计,SSO客户端设计
- 电商网站后台九大功能模块详解
- k8sailor - 08 使用 vue 获取后台 API 数据并展示
- 后台回忆页专辑图片陈列
- Django Admin后台定制简单监控页
- WordPress 技巧:给后台特色图片加上尺寸说明
- 在 WordPress 后台用户列表显示用户注册时间,并按照注册时间排序
- WordPress 后台样式:Button 按钮
- 重新设计的 WordPress 3.8 后台仪表盘界面
- Linux下后台运行程序的实现(linux后台运行程序)
- 深度挖掘——Linux 后台服务(linux后台服务)
- “轻松探秘Linux后台命令”(linux查看后台命令)
- 管理PHPMySQL实现轻松便捷的后台管理(phpmysql后台)
- 重启后台Redis运行(关闭后台redis)
- ORACLE实例的后台进程
- 网站前端和后台性能优化的34条宝贵经验和方法
- MVC后台创建Json(List)前台接受并循环读取实例
- Android判断当前应用程序处于前台还是后台的两种方法
- 使用JQUERY进行后台页面布局控制DIV实现左右式