gpt4 book ai didi

jquery - 多个文件的 Ajax 上传脚本,jQuery ASP.NET MVC

转载 作者:行者123 更新时间:2023-12-01 06:09:24 26 4
gpt4 key购买 nike

我正在为 ASP.NET MVC 应用程序编写上传脚本。我有一个适用于一个文件的实现,但我想扩展它以处理多个上传。这是原始实现:

上传 View (是的,我将把这个 jQuery 代码移动到它自己的文件中):

<script type="text/javascript">
var fieldCount = 0;
function addField() {
var name = 'file' + fieldCount;
var row = 'row' + fieldCount;
var str = '<p id="' + row + '"><label for="' + name + '">File to upload: <input type="file" name="' + name + '" id="' + name + '" />(100MB max size) <a onclick="removeRow(\'#' + row + '\'); return false;">[-]</a></label></p>';
fieldCount++;
$("#fields").append(str);
};
function removeRow(id) {
if ($("#fields").children().size() > 1) {
$(id).remove();
}
};
$(function() {
$("#ajaxUploadForm").ajaxForm({
iframe: true,
dataType: "json",
beforeSubmit: function() {
$("#resultBox").show();
$("#status").html('<h1><img src="/Content/busy.gif" /> Uploading file...</h1>');
},
success: function(result) {
$("#ajaxUploadForm").unblock();
$("#ajaxUploadForm").resetForm();
var tcolor;
var msg;
if (!result.message) {
tcolor = "red";
msg = result.error;
}
else {
tcolor = "green";
msg = result.message;
}
$("#resultBox").show();
$("#status").html('<span style="color:' + tcolor + ';">' + msg + '</span>').animate({ opacity: 1.0 }, 3000).fadeOut('slow', function() {
$("#resultBox").hide();
});
},
error: function(xhr, textStatus, errorThrown) {
$("#ajaxUploadForm").unblock();
$("#ajaxUploadForm").resetForm();
$("#resultBox").add("p").attr("id", "status").css("margin-top", "15px").css("padding", "20px");
$("#status").html('<span style="color:red;">Error uploading file</span>').animate({ opacity: 1.0 }, 3000).fadeOut('slow', function() {
$("#resultBox").hide();
});
}
});
});
</script>
<form id="ajaxUploadForm" action="<%= Url.Action("AjaxUpload", "Upload")%>" method="post" enctype="multipart/form-data">
<fieldset id="uploadFields">
<legend>Upload a file</legend>
<div id="fields"></div>
<input id="ajaxUploadButton" type="submit" value="Submit" />
</fieldset>
<a onclick="addField(); return false;" id="add">Add</a>
<div id="resultBox">
<p id="status" style="margin:10px;"></p>
</div>
</form>

行动结果:

public FileUploadJsonResult AjaxUpload(HttpPostedFileBase file)
{
Upload fileToUpload;
try
{
fileToUpload = new Upload
{
filename = file.FileName,
filesize = file.ContentLength,
date = DateTime.Now,
id = Guid.NewGuid()
};

var savedFileName = Server.MapPath(Path.Combine(@"~/uploads", Path.GetFileName(fileToUpload.filename)));
if (System.IO.File.Exists(savedFileName))
{
throw new Exception(string.Format("The file '{0}' already exists on the server.", file.FileName));
}
file.SaveAs(savedFileName);
}
catch (Exception ex)
{
return new FileUploadJsonResult { Data = new { error = string.Format("Upload failure: {0}", ex.Message), message = string.Empty } };
}
return new FileUploadJsonResult { Data = new { message = string.Format("{0} uploaded successfully. (id:{1})", Path.GetFileName(file.FileName), fileToUpload.id) } };
}

我使用了概念from this blog post让这一切顺利进行。

<小时/>

现在使用我的 javascript 添加/删除字段,我稍微更改了操作结果:

public List<FileUploadJsonResult> AjaxUpload(HttpPostedFileBase fileBase)
{
var results = new List<FileUploadJsonResult>();
try
{
if (Request.Files.Count > 0)
{
Upload uploadFile;
for (var i = 0; i <= (Request.Files.Count - 1); i++)
{
HttpPostedFileBase file = Request.Files[i];
uploadFile = new Upload
{
filename = file.FileName,
filesize = file.ContentLength,
date = DateTime.Now,
id = Guid.NewGuid()
};
var savedFileName = Server.MapPath(Path.Combine(@"~/uploads", Path.GetFileName(uploadFile.filename)));
if (System.IO.File.Exists(savedFileName))
{
results.Add(new FileUploadJsonResult { Data = new { error = string.Format("Upload failure: {0}", string.Format("The file '{0}' already exists on the server.", file.FileName)), message = string.Empty } });
}
file.SaveAs(savedFileName);
results.Add(new FileUploadJsonResult { Data = new { message = string.Format("{0} uploaded successfully", file.FileName) } });
}
}
}
catch (Exception ex)
{
results.Add(new FileUploadJsonResult { Data = new { error = string.Format("Upload failure: {0}", ex.Message), message = string.Empty } });
}
return results;
}

我现在有点陷入困境。上传工作正常,但我的 JavaScript 出错,因为我返回一个列表而不是单个项目。我想如果我调整这部分代码来迭代结果列表,就可以实现这一点。

我希望能够做的另一件事是在每个文件上传完成后,将成功文本添加到结果框中。

如有任何帮助,我们将不胜感激!谢谢!

最佳答案

您好,您必须在此处返回一个 ActionResult,不能返回它们的列表。另外,您还使用 Request.Files 集合,因此无需在操作中使用 HttpPostedFileBase fileBase。

这样的事情可能对你有用

    public FileUploadJsonResult AjaxUpload() {
try {
foreach (string name in Request.Files) {
var file = Request.Files[name];
if (!string.IsNullOrEmpty(file.FileName)) {
file.SaveAs( Server.MapPath(Path.Combine(@"~/uploads", Path.GetFileName(file.FileName)));
}
}
} catch (Exception ex) {
return new FileUploadJsonResult {
Data = new {
error = string.Format("Upload failure: {0}", ex.Message),
message = string.Empty
}
};
}

return new FileUploadJsonResult {
Data = new {
message = "file(s) uploaded successfully"
}
};
}

此外,您可能需要 HttpModule to provide a progress bar该示例使用 jQuery.form 插件和 jquery ui 进度条

关于jquery - 多个文件的 Ajax 上传脚本,jQuery ASP.NET MVC,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1466975/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com