c# - 使用onclick函数和ajax上传图像文件?
问题描述
我尝试使用onclick
函数和 ajax 上传图像文件有可能吗?我搜索如何上传图片,但只有我能看到是通过点击功能。但我有一个原因,这就是我使用 onclick 功能的原因。控制器始终为空值
<div class="col-md-2">
<div class="form-group">
@Html.LabelFor(x => x.ImagePath, new { @class = "form-label" })
<input type="file" name="file" id="files" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<button type="submit" id="btnUpload" class="btn btn-primary btn-sm" onclick="saveImage()"><i class="fas fa-save"></i> Submit Image</button>
</div>
</div>
这是我的 jquery 和 ajax
function saveImage() {
var formData = new FormData();
formData.append('file', $('#files')[0].files[0]);
$.ajax({
url: '@Url.Action("index", "payable")',
type: 'POST',
data: formData,
traditional: true,
success: function (data) {
alert("success");
}
});
}
我的控制器
public ActionResult Index()
{
HttpPostedFileBase file = Request.Files[0];
string fileName = Path.GetFileNameWithoutExtension(file.FileName);
string extension = Path.GetExtension(file.FileName);
fileName = fileName + extension;
var ImagePath = "~/Image/" + fileName;
fileName = Path.Combine(Server.MapPath("~/Image/"), fileName);
file.SaveAs(fileName);
return View();
}
解决方案
试试这个代码:
var ufiles = $("#fileInput")[0].files;
if (ufiles.length > 0) {
if (window.FormData !== undefined) {
var fileData = new FormData();
//handling multiple files or single file
for (var x = 0; x < ufiles.length; x++) {
fileData.append(ufiles[x].name, ufiles[x]);
}
$.ajax({
type: "POST",
url: "yourUrl",
contentType: false,
processData: false,
data: fileData,
success: function (result) {
//do something with result
},
});
} else {
alert("This browser doesn't support HTML5 file uploads!"); //bootbox dependency
}
}
在服务器端:
[HttpPost]
public JsonResult Index()
{
HttpPostedFileBase file = HttpContext.Request.Files[0];//this can be put under foreach for multiple files
string fileName = Path.GetFileNameWithoutExtension(file.FileName);
string extension = Path.GetExtension(file.FileName);
fileName = fileName + extension;
var ImagePath = "~/Image/" + fileName;
fileName = Path.Combine(Server.MapPath("~/Image/"), fileName);
file.SaveAs(fileName);
//now cause we are hadnling ajax
return Json(fileName,JsonRequestBehavior.AllowGet);
}
推荐阅读
- php - 用户输入值与数据库数组值未使用 JSON 进行验证
- javascript - 我有两个数组,两个数组都有数据,但都有 field_id 所以我想要合并数组
- ios - 当我使用 DRAW_SCENE 时,SCNTechnique 管道几乎立即崩溃
- sql-server - 为什么 DB_ID() 函数不能在 DBCC PAGE 函数中使用
- r - 如何抑制最左边的列(天),因为它一直以整数形式出现在我的输出中
- azure - 如何通过 API 接收 12 个月和 36 个月(1 年和 3 年)的预留实例 (VM) 定价
- python - 将 MultiIndex 转换为数据框
- acumatica - 如何通过指向单个数据库的多个实例的代码获取 Acumatica 实例安装 ID
- json - 如何循环通过发布的 json 数组
- php - 仅 GET 请求时 Nginx 重定向