Ajax 图像上传程序问题

Question

我在ASP中制作的图片上传器有问题。我想使用 ajax 将图像上传到项目文件夹。

我的 HTML 和 JS：

<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload1" runat="server" />
<br />
<br />
<a href="#" id="btnImg" onclick="uploadImg()" runat="server">UPLOAD</a>
</div>
</form>
<script>
function uploadImg(){
var formData = new FormData();
formData.append('FileUpload1', $('#btnImg')[0].files[0]);
$.ajax({
type: "POST",
url: 'Default.aspx/imageUpload',
data: formData,
contentType: 'application/json; charset=utf-8',
success: function (data) {
alert(data);
}
});
}
</script>

我的图片上传代码(C#)：

[WebMethod]
protected void imageUpload(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
Guid _fileNameRandom = Guid.NewGuid();
string _fileNameStr = _fileNameRandom.ToString();
FileUpload1.PostedFile.SaveAs(Server.MapPath("/Images/") + (_fileNameStr + fileName));
Response.Redirect(Request.Url.AbsoluteUri);
}
}

在控制台中，我收到以下错误： 未捕获的类型错误：无法读取未定义的属性"0" 上传时Img(默认.aspx：32) at HTMLAnchorElement.onclick (Default.aspx：21)

缺省情况下的第 32 行.aspx为：});的 js 脚本。 第 21 行是：函数 uploadImg(){

希望有人能帮助我解决这个问题。

Answer 1

$('#btnImg')[0]

是罪魁祸首。

$('#btnImg')[0]永远不会有文件集合，因为这是一个锚元素，请尝试将其更改为$('#FileUpload1')[0]，看看是否有效？ 如果没有，您需要引用input[type='file']元素，我认为 ASP 帮助程序应该使用该 id 为您呈现该元素。

Answer 2

它对我有用，显示图像并上传图像：

.HTML：

<label asp-for="Image"></label>
<input type="file" id="FileUpload" onchange="ShowImage(this)" name="file" />
<input type="button" id="but_upload" class="button" value="Upload">
<img src="#" id="imgBox" class="img-responsive" width="100%"/>

.js：

显示图像

function ShowImage(input) {       
if (input.files && input.files[0]) {        
var reader = new FileReader();
reader.onload = function (e) {
$('#imgBox').attr("src", e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}

上传图片：

var fd = new FormData();
$(document).ready(function () {
$('#but_upload').click(function () {
var file = $("#FileUpload").get(0).files;
if (file != undefined) {
fd.append('fillle', file[0]);
}
else {
alert("undefined");
}
$.ajax({
url: "/Admin/Person/UploadFile",
type: "POST",
data: fd,
processData: false,
contentType: false,
success: function (data) {
if (data.success) {
alert(data.message);                    
}
else {
alert(data.message);
}
}
});
});
});

C# 代码：

private readonly IWebHostEnvironment _hostEnvironment;
//It needs to inject to the constructor
[HttpPost]
public IActionResult UploadFile(IFormFile fillle)
{
string wwwRoothPath = _hostEnvironment.WebRootPath;
if (fillle != null)
{
string fileName = "TempFile"; // Or: Guid.NewGuid().ToString();
var upload = Path.Combine(wwwRoothPath, @"imagesPerson"); //First make a folder Person in images route
var extension = Path.GetExtension(fillle.FileName);
using (var filestream = new FileStream(Path.Combine(upload, fileName + extension), FileMode.Create))
{
fillle.CopyTo(filestream);
}
return Json(new { success = true, message = "Image Uploaded Succesfully" });
}
else
{
return Json(new { success = false, message = "Error Uploading File" });
}
}

我希望这会有所帮助。