我目前遇到的问题与此处完全相同：Multiple File Upload with jQuery [removing file then adding it again]。
到目前为止，我已经做到了这一点：
function UploadFile(ajaxUrl, event)
{
if ($("p[id=alertFileCount]").is(":visible"))
$("p[id=alertFileCount]").hide();
if (ajaxUrl == '' || ajaxUrl === undefined)
{
ShowErrorAlertUploadFiles();
return;
}
var fileList = [];
var files = event.target.files;
var $elem = $("a.attachMessageBtn");
if (ValidateFilesCount(files) === false)
{
ShowErrorAlertUploadFiles();
return;
}
for (var i = 0; i < files.length; i++)
{
var file = files[i];
var ext = $("#fileAttach").val().split('.').pop().toLowerCase();
event.stopPropagation();
event.preventDefault();
if (ValidateFiles(file, ext) === false)
return;
else
{
var finalData = [];
var evtOnClick = $elem.attr('onclick');
var postData = new FormData();
postData.append("file", file);
// contentType: false _> Set content type to false as jQuery will tell the server its a query string request.
// enctype: "multipart/form-data" _> Compatibility with IE.
$.ajax({
url: ajaxUrl + "?a=setUploadFile",
type: "POST",
data: postData,
cache: false,
processData: false,
contentType: false,
forceSync: false,
enctype: "multipart/form-data",
beforeSend: function (jqXHR, settings)
{
$elem.attr('onclick', null);
},
success: function (data, textStatus, jqHXR)
{
fileList.push(file);
finalData = data.split('|');
UpdateFileUploadUI(finalData);
},
error: function (jqHXR, textStatus, errorThrown)
{
ShowErrorAlertUploadFiles();
if (jqXHR.getAllResponseHeaders() !== '')
LogError(errorThrown, this.url, 0, 0, this.type + ': ' + this.data);
},
complete: function (jqXHR, textStatus)
{
$elem.attr('onclick', evtOnClick);
}
});
}
}
}
function ValidateFilesCount(files)
{
var currFiles = files.length;
var currAttachFilesAddRemove = $("#attachFilesAddRemove > div.attached").length;
var currFileTempNames = $("#fileTempNames").val().split('?').length;
if (currFiles > 3
|| currAttachFilesAddRemove > 3
|| currFileTempNames > 3
|| currFiles + currAttachFilesAddRemove > 3)
{
ShowNoContentUploadFiles('{ERROR MESSAGE HERE}');
return false;
}
return true;
}
function ValidateEmptyFile(file)
{
if (file.size == 0)
return false;
return true;
}
function ValidateFileMaxSize(file)
{
var maxFileSize = 4 * 1024 * 1024;
if (file != null && file.size > maxFileSize)
return false;
return true;
}
function ValidateFileExt(ext)
{
if ($.inArray(ext, ['exe']) > -1)
return false;
return true;
}
function ShowNoContentUploadFiles(text)
{
var $pNoContent = $("p[id=alertFileCount]");
$pNoContent.html(text);
$pNoContent.show().css({ opacity: 1, display: "block" });
}
function ValidateFiles(file, ext)
{
var text = '';
var isInvalid = false;
if (ValidateEmptyFile(file) === false)
{
text = 'You may only upload files with over 0bytes.';
isInvalid = true;
}
if (ValidateFileMaxSize(file) === false)
{
text = 'You may only upload files with up to 4MB.';
isInvalid = true;
}
if (ValidateFileExt(ext) === false)
{
text = 'Files with extension \'.exe\' will not be uploaded.';
isInvalid = true;
}
if (isInvalid === true)
{
ShowNoContentUploadFiles(text);
return false;
}
return true;
}
function UpdateFileUploadUI(finalData)
{
UpdateFilesAddRemove(finalData);
UpdateFileDataMediaUID();
}
function UpdateFilesAddRemove(finalData)
{
var fileData = finalData[0] + '|' + finalData[1];
$("div[id=attachFilesAddRemove]").append("<div class='attached' data-mediauid='"
+ fileData
+ "'><a class='file' style='cursor: pointer;'>"
+ finalData[0]
+ "</a><a onclick=\"RemoveAttachedFile(\'"
+ fileData
+ "\');\" style='cursor: pointer;' class='close'></a></div>");
}
function UpdateFileDataMediaUID()
{
var listData = '';
$("div[id=attachFilesAddRemove] > .attached").each(function (i, obj)
{
listData += $(obj).attr("data-mediauid") + '?';
});
listData = listData.slice(0, -1);
$("input[id=fileTempNames]").val(listData);
}
function RemoveAttachedFile(fileData)
{
if (fileData == '' || fileData === undefined)
return;
// Update the names in fileTempNames.
var result = '';
var $iElem = $("input[id=fileTempNames]");
var names = $iElem.val().split('?');
for (var i = 0; i < names.length; i++)
{
if (names[i] != '' && names[i] != fileData)
{
result += names[i] + '?';
}
}
$iElem.val(result);
$("div[data-mediauid='" + fileData + "']").remove();
}
function ShowErrorAlertUploadFiles()
{
SetAlertBoxTitleAndText('', 'At the moment it was not possible to proceed with the upload, please try again later.', true);
ShowAlertBox();
}
还可以在html中使用此文件上传：
<a class="attachMessageBtn" style="cursor: pointer; position: relative; overflow: hidden; direction: ltr;">Adicionar ficheiro
<input id="fileAttach" type="file" name="file" multiple="multiple" title="Adicionar ficheiro" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;" onchange="UploadFile('<%=VirtualPathUtility.ToAbsolute({SERVER ADDRESS HERE})%>', event);" accept="*">
</a>
<input id="fileTempNames" type="hidden" value="">
<div class="attachFiles" id="attachFilesAddRemove"></div>
<p id="alertFileCount" style="display: none;"></p>
{}之间的错误消息和服务器地址实际上都已正确编码，只是不在此处显示。
我为代码长度道歉。
我需要一种简单的方法来添加最多3个文件作为附件，然后如果用户希望添加一个，删除它并再次添加它，它必须正常工作。我的代码在Firefox上运行良好，但当然这种借口在公司中不起作用。
这里的大多数团队都使用插件，但是我已经没有这样的选择了，因为我已经尝试过了，并且由于代码必须承受的巨大变化而变得难以工作20倍（更改我没有时间也没有授权继续进行。）
请帮忙吗？我发布的帖子中的一条评论说小提琴制作工作正常，但我测试了它，同样的问题，在Chrome和IE上没什么，在Firefox上运行正常。
此外，我必须补充一点，我在编程方面只有一年的经验，其中大部分是针对Android平台的移动平台，这并没有让我掌握所需的技能来理解浏览器背后的大多数工作引擎甚至网页浏览总的来说。
提前非常感谢你。
答案 0 :(得分：1)
最终放弃了上传到临时文件夹的想法，并在邮件发送时移动文件。相反，现在，我在同一个FormData对象上发送所有内容（使用这里http://www.c-sharpcorner.com/UploadFile/manas1/upload-files-through-jquery-ajax-in-Asp-Net-mvc/和JQuery ajax file upload to ASP.NET with all form data的混合，现在它正在工作（这对我来说已经足够了）... < / p>