Список файлов ввода файла HTML5 читается только, поэтому при попытке удалить из него файл вам не разрешат.
Что вам нужно сделать, это сохранить отдельный список массивов (массив JSON как показано в примере).
Я обернул вашу кнопку X с помощью div, которые содержат индекс файла, объединенный с строкой 'file_', и добавили функцию onclick
removeLine(obj)
, которая принимает элемент как объект.
Я также добавил массив JSON finalFiles
в глобальную область, а также переместил inputFile
в глобальную область.
Когда вход файла изменяется, Я устанавливаю массив JSON с выбранными файлами через:
$.each(this.files,function(idx,elm){
finalFiles[idx]=elm;
});
Функция removeLine
очистит список входных файлов, чтобы повторить тот же выбор файла, если пользователь по ошибке удалил файл, функция получает индекс файла из идентификатора раздела оболочки, удаляет оболочку div и затем удаляет файл из массива JSON.
function removeLine(obj)
{
inputFile.val('');
var jqObj = $(obj);
var container = jqObj.closest('div');
var index = container.attr("id").split('_')[1];
container.remove();
delete finalFiles[index];
//console.log(finalFiles);
}
Вы можете поддерживать свои файлы, когда форма отправляется и отправляется через AJAX-сообщение использование FormData в симу Drop files here...var dropZoneId = "drop-zone";
var buttonId = "clickHere";
var mouseOverClass = "mouse-over";
var dropZone = $("#" + dropZoneId);
var inputFile = dropZone.find("input");
var finalFiles = {};
$(function() {
var ooleft = dropZone.offset().left;
var ooright = dropZone.outerWidth() + ooleft;
var ootop = dropZone.offset().top;
var oobottom = dropZone.outerHeight() + ootop;
document.getElementById(dropZoneId).addEventListener("dragover", function(e) {
e.preventDefault();
e.stopPropagation();
dropZone.addClass(mouseOverClass);
var x = e.pageX;
var y = e.pageY;
if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
inputFile.offset({
top: y - 15,
left: x - 100
});
} else {
inputFile.offset({
top: -400,
left: -400
});
}
}, true);
if (buttonId != "") {
var clickZone = $("#" + buttonId);
var oleft = clickZone.offset().left;
var oright = clickZone.outerWidth() + oleft;
var otop = clickZone.offset().top;
var obottom = clickZone.outerHeight() + otop;
$("#" + buttonId).mousemove(function(e) {
var x = e.pageX;
var y = e.pageY;
if (!(x < oleft || x > oright || y < otop || y > obottom)) {
inputFile.offset({
top: y - 15,
left: x - 160
});
} else {
inputFile.offset({
top: -400,
left: -400
});
}
});
}
document.getElementById(dropZoneId).addEventListener("drop", function(e) {
$("#" + dropZoneId).removeClass(mouseOverClass);
}, true);
inputFile.on('change', function(e) {
finalFiles = {};
$('#filename').html("");
var fileNum = this.files.length,
initial = 0,
counter = 0;
$.each(this.files,function(idx,elm){
finalFiles[idx]=elm;
});
for (initial; initial < fileNum; initial++) {
counter = counter + 1;
$('#filename').append('
#drop-zone {
width: 100%;
min-height: 150px;
border: 3px dashed rgba(0, 0, 0, .3);
border-radius: 5px;
font-family: Arial;
text-align: center;
position: relative;
font-size: 20px;
color: #7E7E7E;
}
#drop-zone input {
position: absolute;
cursor: pointer;
left: 0px;
top: 0px;
opacity: 0;
}
/*Important*/
#drop-zone.mouse-over {
border: 3px dashed rgba(0, 0, 0, .3);
color: #7E7E7E;
}
/*If you dont want the button*/
#clickHere {
display: inline-block;
cursor: pointer;
color: white;
font-size: 17px;
width: 150px;
border-radius: 4px;
background-color: #4679BD;
padding: 10px;
}
#clickHere:hover {
background-color: #376199;
}
#filename {
margin-top: 10px;
margin-bottom: 10px;
font-size: 14px;
line-height: 1.5em;
}
.file-preview {
background: #ccc;
border: 5px solid #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
font-size: 14px;
margin-top: 5px;
}
.closeBtn:hover {
color: red;
display:inline-block;
}
}
Удалите заголовочную маску стиля из кода и проверьте, работает ли она.
Я использую следующий код, и он прекрасно работает для меня
let window = NSWindow(contentRect: NSMakeRect(10, 10, 700, 700), styleMask: .titled, backing: .buffered, defer: false)
window.isOpaque = false
window.titlebarAppearsTransparent = true
window.makeKeyAndOrderFront(nil)
window.isMovableByWindowBackground = true
Не уверен, если у вас есть панель инструментов, но если у вас есть, вы должны удалить разделитель.