javascript - 当我向 ajax 图像预览添加其他图像时,之前的图像不会出现在输入类型 FILES 数组中
问题描述
- 我用ajax预览图片,没关系,但是当我再次在上面添加图片时,FILES系列有最后的添加。以前的照片消失。
function previewImages(bu,p_id) {
var preview = document.querySelector('#image_multiple_block33');
//alert(preview.getAttribute("id"));
if (bu.files) {
[].forEach.call(bu.files, readAndPreview);
}
var files_id = bu.getAttribute("id");
var img_content_count;
function readAndPreview(file) {
// Make sure `file.name` matches our extensions criteria
if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
return alert(file.name + " noo support file");
} // else...
var reader = new FileReader();
reader.addEventListener("load", function() {
var image = new Image();
image.width = 100;
image.title = file.name;
image.src = this.result;
var t = document.createElement('div');
t.className = 'image_content image'+p_id;
t.id = 'image'+p_id;
t.setAttribute("id", t.id);
t.innerHTML += '<div class="img_content_inner" id="img_content_inner'+p_id+'">'+
'<input type="text" name="image_color" placeholder="Product Color">'+
'<img src="'+image.src+'" width="'+image.width+'%" title="'+image.title+'" />'+
'<div class="multiple_img_del"><span onclick="multiple_image_del('+t.id+')">X</span></div>'+
'</div>';
//t.append(image);
//preview.appendChild(t);
var bu = preview.getAttribute("id");
var c = document.getElementById(bu).children.length;
var list = document.getElementById(bu);
list.insertBefore(t, list.children[1]);
// append files val
var fileSelect = document.getElementById(files_id);
var files = fileSelect.files;
var form_data = new FormData();
//alert(totalfiles);
for (var i = 0; i < files.length; i++) {
var fil = files[i];
if (!fil.type.match('image.*')) {
continue;
}
form_data.append("multiple_file[]", file, fil.name);
}
xhr = new XMLHttpRequest();
xhr.open("POST", "update/home-page-update.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(form_data);
});
reader.readAsDataURL(file);
}
}
.image_multiple {display: flex;flex-wrap: wrap;}
.image_content {flex: 0 33.333%;flex-wrap: wrap; max-width: 33.333%;padding: 20px; box-sizing: border-box;}
.image_content:first-child {flex: 0 100% !important;max-width: 100% !important;}
.image_content form {width: auto !important;}
.img_content_inner {border:1px dashed #ccc;padding: 10px;position: relative;}
.img_content_inner:hover .multiple_img_del {display: block;}
.multiple_img_del {position: absolute;right: 20px;bottom: 20px;display: none;}
.multiple_img_del span {display: block;background-color: orange; color: #fff;padding: 5px;width:30px;height:30px;line-height:30px;border-radius: 25px; cursor: pointer;}
.multiple_img_del span:hover {color: #111;}
.img_content_inner input[type="text"] {padding: 10px; width: 100%; box-sizing: border-box;margin-bottom: 10px; border: 1px solid #ccc;border-radius: 5px;}
.img_content_inner input[type="text"]:focus { border-color: #3f51b5 }
form#width_style {width:100%;box-sizing: border-box;}
.img_content_inner #multiple_label {cursor: pointer;}
<div class="image_multiple" id="image_multiple_block33">
<div class="image_content image_content<?php echo $urun_v->urun_id; ?>">
<div id="img_content_inner" class="img_content_inner">
<label for="multiple_images<?php echo $urun_v->urun_id; ?>" id="multiple_label">
<span class="img_symbol">📤</span>
</label>
<input id="multiple_images33" name="multiple_file_images[]" type="file" onchange="previewImages(this,'33')" multiple>
</div>
</div>
</div>
- 这就是我想要发生的事情 当我选择要预览的图片时,我需要添加更多图片,但是当我添加它们时,它们是 FILES 系列中最新的。2.我在图片上方的区域添加了图片颜色信息。我与这些图片有什么关系?
- 最后是php工具:
白色 图片 1 图片 2 图片 4
黑色 图片 3 图片 5
……
最后以json格式保存到数据库
解决方案
检查带有预览的ajax图像上传链接。
https://www.nicesnippets.com/blog/php-ajax-image-upload-with-preview-example
<script type="text/javascript">
$(document).ready(function (e) {
$("#uploadForm").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#targetLayer").html(data);
},
error: function()
{
}
});
}));
});
</script>
推荐阅读
- robotframework - 在使用 Edge 的机器人框架中,如何在 Pycharm 中更改重定向到我的 Runner 文件夹的下载路径?
- install4j - 使用 Install4j 进行双重签名
- numpy - Xarray 2维纬度变量
- javascript - cy.wrap() 在 mailosaur 中超时等待 4000 毫秒才能完成
- c# - 如何在asp .net core 3.1中将模型转换为xml
- git - 我想使用简单的 git merge 而不是 git rebase,有什么区别?
- windows - 在 Windows 上,哪些情况下互斥体比进程中的 CS 更好?
- python - 如何在 Encoder-Decoder Seq2Seq 模型中添加 Dropout
- flutter - 底部溢出 224 像素的 RenderFlex
- python - 为什么我在二进制文件中查找集合数的代码不起作用?