Dapper上传图片
<h2>添加商品</h2>
<table class="table table-bordered">
<tr>
<td>商品名称:</td>
<td><input id="name" type="text" /></td>
</tr>
<tr>
<td>商品图片:</td>
<td><input type="file" id="f1" /></td>
<td><input type="button" value="aa" onclick="ff()" /></td>
</tr>
<tr>
<td>商品颜色:</td>
<td><input id="color" type="text" /></td>
</tr>
<tr>
<td>商品尺码:</td>
<td><input id="size" type="text" /></td>
</tr>
<tr>
<td>商品价格:</td>
<td><input id="price" type="text" /></td>
</tr>
<tr>
<td><input id="Button1" type="button" value="添加" onclick="add()" /></td>
<td></td>
</tr>
</table>
<script>
//上传文件
var url = []; //图片路径
function ff() {
var formData = new FormData();
var file = document.getElementById("f1").files[0];
formData.append("fileInfo", file);
$.ajax({
url: "http://localhost:51518/api/Shop/UpLoad",
type: "post",
data: formData,
contentType: false,//必须false才会自动加上正确的Content-Type
processData: false,//必须false才会避开jQuery对 formdata 的默认处理，XMLHttpRequest会对 formdata 进行正确的处理
success: function (data) {
if (data.Code == 0) {
alert(data.Msg);
//保存图片路径
url = (data.Url).split(";");
}
else {
alert('上传失败!');
}
}
})
}
//添加商品
function add() {
var obj = {
GName: $("#name").val(),
GImg: url[0],
GColor: $("#color").val(),
GSize: $("#size").val(),
GPrice: $("#price").val()
};
$.ajax({
url: "http://localhost:51518/api/Shop/AddGood",
data: obj,
type: "post",
dataType: "json",
success:
function (d) {
if (d > 0) {
alert('添加成功!');
location.href = "/Default/ShowGood";
}
else {
alert('添加失败!');
}
}
})
}
</script>
最新文章
- Lattice Reduction (LLL) 算法C代码实现
- css text-align-last设置末尾文本对齐方式
- Bootstrap入门（二）栅格
- 禁止输入中文 与 禁止输入数字在phonegap api环境效果
- 快速破解ps方法
- Hadoop1.0.3安装部署
- CF908D Arbitrary Arrangement
- “百度杯”CTF比赛 十二月场_blog（kindeditor编辑器遍历，insert注入，文件包含）
- SQLServer之多表联合查询
- XmlReader 使用
- 20165235Linux安装及学习
- CF786B Legacy && 线段树优化连边
- Spring Cloud （5）hystrix 服务监控
- Linux 多进程实现方法
- Java基本语法之动手动脑
- Python-类-dict
- (转) MVC身份验证及权限管理-1
- Web 2.0应用客户端性能问题十大根源《转载》
- 利用Metaweblog技术的API接口同步到多个博客网站（详细）
- python @classmethod 的使用场合