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>

原文地址:https://www.cnblogs.com/CoreColor/p/13448772.html