javascript - 从php中数组的输入文件列表中删除特定文件
问题描述
我正在使用 PHP 进行多张图片上传。在进行预览时,我也提供了删除图像的按钮。
我的代码如下:
HTML
<div class="col-md-12 margin-bottom10">
<input type="file" accept="image/*" name="file_name[]" id="file_name" onchange="preview_image()" class="inputfile" multiple />
<?php echo '<div class="margin-bottom10">'.form_error('file_name').'</div>'; ?>
<label class="btn btn-danger" for="file_name"><i class="fa fa-upload"></i> Choose image to upload</label>
<button type="submit" name="submit" class="btn btn-primary">Create</button>
</div>
<div class="col-md-12 margin-bottom10">
<div class="row" id="image_preview">
</div>
</div>
JAVASCRIPT
var newFileList = null;
function preview_image(){
var total_file=document.getElementById("file_name").files.length;
newFileList = Array.from(event.target.files);
for(var i=0;i<total_file;i++){
$('#image_preview').append("<div class='col-md-2 margin-top10 appendedImg'><img style='width: 100%; height: 130px; object-fit: cover;' src='"+URL.createObjectURL(event.target.files[i])+"'><button class='btn btn-block btn-danger margin-top5 btnRemove' value='"+i+"'>Remove</button></div>");
}
}
$(document).on('click', '.btnRemove', function(){
$(this).closest('.appendedImg').remove();
var id = $(this).val();
newFileList.splice(id,1);
});
正如您从我的代码中看到的那样,我已经成功地完成了从列表中删除特定文件的操作,方法是先保存到数组,然后只使用splice()
删除。
所以,我的问题是,是否可以$_FILES
用数组值分配 php 数组 newFileList
值?因为,删除仅在 javascript 端有效,因此它不会影响 php 数组的文件输入中的列表。
解决方案
输入的文件列表是只读的,这就是$_FILES
全局的设置方式。
请参阅:https ://developer.mozilla.org/en-US/docs/Web/API/FileList
但是,您可以设置一个隐藏元素来存储“已删除”的文件并在发布时在 PHP 中过滤它们。
考虑以下示例:
使用删除按钮时,它会将文件名添加到数组中,该数组被隐藏元素中的 JSON 字符串覆盖。
在发布时,循环遍历$_FILES
全局,如果文件名在删除列表中,则不要处理它。
当然,您会希望上传内容不那么松散且更安全,但我希望这能给您带来想法。
(我还没有测试过,所以你可能需要调整。)
HTML
<div class="col-md-12 margin-bottom10">
<input type="file" accept="image/*" name="file_name[]" id="file_name" class="inputfile" multiple />
<label class="btn btn-danger" for="file_name"><i class="fa fa-upload"></i> Choose image to upload</label>
<button type="submit" name="submit" class="btn btn-primary">Create</button>
</div>
<div class="col-md-12 margin-bottom10">
<div class="row" id="image_preview">
</div>
</div>
<input type="hidden" id="removed_files" name="removed_files" value="" />
JavaScript
window.newFileList = [];
$(document).on('click', '.btnRemove', function () {
var remove_element = $(this);
var id = remove_element.val();
remove_element.closest('.appendedImg').remove();
var input = document.getElementById('file_name');
var files = input.files;
if (files.length) {
if (typeof files[id] !== 'undefined') {
window.newFileList.push(files[id].name)
}
}
document.getElementById('removed_files').value = JSON.stringify(window.newFileList);
});
$(document).on('change', '#file_name', function (event) {
var total_file = document.getElementById("file_name").files.length;
for (var i = 0; i < total_file; i++) {
$('#image_preview').append("<div class='col-md-2 margin-top10 appendedImg'><img style='width: 100%; height: 130px; object-fit: cover;' src='" + URL.createObjectURL(event.target.files[i]) + "'><button class='btn btn-block btn-danger margin-top5 btnRemove' value='" + i + "'>Remove</button></div>");
}
});
PHP
<?php
$removedImages = json_decode($_POST['removed_files'], true);
foreach ($_FILES['file_name'] as $FILE) {
if (in_array($FILE['name'], $removedImages)) {
continue;
}
// [import file stuff]
}
推荐阅读
- node.js - MongoDB DISTINCT/UNIQUE 值计数而不使用 countDocuments() 或 distinct() [猫鼬,节点]
- c# - 通过 C# 将 Unicode 从 JSON 绑定到 XAML 不起作用。有办法吗?
- django - 通过外键过滤 Tastypie 资源
- c++ - 设置 DeviceObject 标志后无法卸载驱动程序
- azure - ARM 模板 - 参数更改未在新部署中传播
- flutter - 当互联网关闭时,如何将纬度,经度转换为地址?
- python - webdriver执行官可能对谷歌云运行有错误的权限
- r - drm() 错误 某些数据收敛失败,但类似数据不收敛?
- teradata - 将 teradata 中的列值导出为单独的 .txt 文件
- sql - 分区依据与排序依据?