Ich erfahre derzeit genau das gleiche Problem wie hier: Multiple File Upload with jQuery [removing file then adding it again].mehrere Datei hochladen jquery asp.net hinzufügen, entfernen und dann erneut hinzufügen
Bisher habe ich es geschafft, dies:
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();
}
Auch diese in HTML für Datei-Upload haben:
<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>
Sowohl die Fehlermeldung und die Serveradresse, zwischen {}, sind eigentlich richtig codiert, wird hier nicht angezeigt.
Ich entschuldige mich für die Länge des Codes.
Ich brauche eine einfache Möglichkeit, bis zu 3 Dateien als Anhänge hinzuzufügen, wenn der Benutzer dann einen hinzufügen, entfernen und neu hinzufügen möchte, muss es funktionieren. Mein Code funktioniert gut mit Firefox, aber diese Art von Entschuldigung funktioniert natürlich nicht in einer Firma.
Die meisten Teams verwenden hier Plugins, aber ich habe keine solche Option, wie ich es bereits versucht habe, und war 20 Mal schwerer zu arbeiten, aufgrund der enormen Menge an Änderungen, die der Code erleiden würde (Änderungen Ich habe weder Zeit noch Genehmigung, um fortzufahren).
Irgendwelche Hilfe, bitte? Einer der Kommentare in der Post, die ich verlinkt, sagt, dass die Geige gemacht gut funktionierte, aber ich habe es getestet, und das gleiche Problem, auf Chrome und IE nichts, auf Firefox funktioniert es gut.
Darüber hinaus muss ich hinzufügen, dass ich nur ein Jahr Erfahrung in der Programmierung im Allgemeinen, die meisten davon für mobile Plattform Android, die nicht mit den erforderlichen Fähigkeiten ausgestattet, um die meisten der funktionierenden Engine hinter Browsern oder sogar Web zu verstehen Browsen im Allgemeinen.
Vielen Dank im Voraus.