.upimg_parent {
float: left;
width: 300px;
margin: 10px 10px;
height: 300px;
}
.upimg {
width: 100%;
height: 250px
}
.inputFile {
height: 30px;
width: 240px;
margin-top: 10px;
float: left;
}
.inputBtn {
width: 50px;
float: right;
margin-left: 10px;
margin-top: 10px;
}
<tr>
<td width="150" class="left">上傳照片</td>
<td align="left">
<div class="upimg_parent">
<img src="https://img.uj5u.com/2020/09/25/135775251402271.jpg" class="upimg" />
<input type="file" name="Upload_Pic1" class="inputFile"/>
<input type="button" onclick="upimg(this)" value="https://bbs.csdn.net/topics/上傳" class="inputBtn" />
</div>
<div class="upimg_parent">
<img src="https://img.uj5u.com/2020/09/25/135775251402271.jpg" class="upimg" />
<input type="file" name="Upload_Pic2" class="inputFile"/>
<input type="button" onclick="upimg(this)" value="https://bbs.csdn.net/topics/上傳" class="inputBtn" />
</div>
<div class="upimg_parent">
<img src="https://img.uj5u.com/2020/09/25/135775251402271.jpg" class="upimg" />
<input type="file" name="Upload_Pic3" class="inputFile"/>
<input type="button" onclick="upimg(this)" value="https://bbs.csdn.net/topics/上傳" class="inputBtn" />
</div>
<div class="upimg_parent">
<img src="https://img.uj5u.com/2020/09/25/135775251402271.jpg" class="upimg" />
<input type="file" name="Upload_Pic4" class="inputFile"/>
<input type="button" onclick="upimg(this)" value="https://bbs.csdn.net/topics/上傳" class="inputBtn" />
</div>
<div class="upimg_parent">
<img src="https://img.uj5u.com/2020/09/25/135775251402271.jpg" class="upimg" />
<input type="file" name="Upload_Pic5" class="inputFile"/>
<input type="button" onclick="upimg(this)" value="https://bbs.csdn.net/topics/上傳" class="inputBtn" />
</div>
</td>
</tr>
js代碼：
//上傳圖片
function upimg (obj) {
var formData = new FormData();
//獲取檔案上傳標簽
var input = $(obj).prev();
//獲取name值
var Name = input.attr("name");
//獲取檔案標簽
var q = document.getElementsByName(Name);
// js 獲取檔案物件
var fileObj = q[0].files[0];
//將檔案添加到formdata物件
formData.append("photo", fileObj);
formData.append("service", 'App.Passion.UploadFile');
formData.append("token", "123");
$.ajax({
url: '/api/Upload/upload',
type: 'post',
data: formData,
contentType: false,
processData: false,
success: function (res) {
//console.log(res);
if (res.status) {
//找到圖片標簽
var a = $(obj).parent().children()[0];
//設定src
$(a).prop("src", res.url);
} else {
bootAlertNoMask("訊息", "上傳出錯");
}
}
})
}
c#代碼：
using System;
using System.Globalization;
using System.IO;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using System.Web;
using System.Web.Http;
namespace Web.Controllers.XunjianManage
{
public class UploadController : ApiController
{
[HttpPost]
[AllowAnonymous]
public async Task<IHttpActionResult> upload()
{
//檢查是否是 multipart/form-data
if (!Request.Content.IsMimeMultipartContent())
{
throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
}
//設定上傳目錄
string root = HttpContext.Current.Server.MapPath("~/UploadFiles");
var provider = new MultipartFormDataStreamProvider(root);
try
{
//讀取form data.
await Request.Content.ReadAsMultipartAsync(provider);
string urlPic = string.Empty;
foreach (var file in provider.FileData)
{
//這里獲取含有雙引號'" '
string filename = file.Headers.ContentDisposition.FileName.Trim('"');
//獲取對應檔案后綴名
string fileExt = filename.Substring(filename.LastIndexOf('.'));
FileInfo fileinfo = new FileInfo(file.LocalFileName);
//fileinfo.Name 上傳后的檔案路徑 此處不含后綴名
//修改檔案名 添加后綴名
string fname = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo);
//string newFilename = fileinfo.Name + fileExt;默認檔案名guid生成
string newFilename = fname + fileExt;
//最后保存檔案路徑
string saveUrl = Path.Combine(root, newFilename);
fileinfo.MoveTo(saveUrl);
urlPic += "/UploadFiles/" + newFilename;
}
// 獲取表單 key-value.
//foreach (var key in provider.FormData.AllKeys)
//{
// foreach (var val in provider.FormData.GetValues(key))
// {
// str+=string.Format("{0}: {1}", key, val);
// }
//}
if (!string.IsNullOrEmpty(urlPic))
{
dynamic data = new { status = true, url = urlPic };
return Json<dynamic>(data);
}
else
{
dynamic data = new { status = false, message = "上傳失敗" };
return Json<dynamic>(data);
}
}
catch
{
dynamic data = new { status = false, message = "上傳失敗" };
return Json<dynamic>(data);
}
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/126028.html
標籤：ASP.NET