【发布时间】：2021-08-02 10:11:12
【问题描述】：
我希望能够将图像从 Javasctipt 传递到 PHP，然后将它们上传并存储在 MySQL 中。
<div class="media">
<div class="aspect-ratio">
<div class="previewcon">
<div class="preview" id="preview1con">
<img id="preview1" src="" alt="">
<i id="remove1" class="fas fa-times"></i>
</div>
<div class="preview" id="preview4con">
<img id="preview4" src="" alt="">
<i id="remove4" class="fas fa-times"></i>
</div>
</div>
<div class="previewcon" id="previewcon">
<div class="preview" id="preview2con">
<img id="preview2" src="" alt="">
<i id="remove2" class="fas fa-times"></i>
</div>
<div class="preview" id="preview3con">
<img id="preview3" src="" alt="">
<i id="remove3" class="fas fa-times"></i>
</div>
</div>
</div>
</div>
<div class="option">
<div class="icons">
<div class="icon-input">
<i class="fas fa-photo-video i-hover-s current"></i>
<input id="media-input" name="media-array[]" type="file" accept="image/jpeg,image/png,image/webp,image/gif,video/mp4,video/quicktime,video/webm" onchange="mediaSelect()" multiple>
</div>
<script>
const mediaUploading = document.getElementById("media-uploading");
var medias = [];
function mediaSelect(){
var media = document.getElementById("media-input").files;
for(i = 0; i < media.length; i++){
if(medias.length >= 4){
}
else{
medias.push({
"name" : media[i].name,
"url" : URL.createObjectURL(media[i]),
"file" : media[i]
});
}
}
if(medias[0]){
mediaCon = document.querySelector(".media")
preview1.src = medias[0]["url"];
mediaCon.style.display = "block";
preview2con.style.display = "none";
preview3con.style.display = "none";
preview4con.style.display = "none";
previewcon.style.display = "none";
preview1con.style.display = "block";
preview1con.style.height = "100%";
if(medias[1]){
preview2.src = medias[1]["url"];
preview2con.style.display = "block";
previewcon.style.display = "block";
preview2con.style.height = "100%";
}
if(medias[2]){
preview3.src = medias[2]["url"];
preview3con.style.display = "block";
preview2con.style.height = "50%";
}
if(medias[3]){
preview4.src = medias[3]["url"];
preview4con.style.display = "block";
preview1con.style.height = "50%";
}
}
}
remove1.addEventListener("click", () =>{
mediaCon = document.querySelector(".media")
medias.splice(0, 1);
preview1con.style.display = "none";
if(!medias[0]){
mediaCon.style.display = "none";
}
if(medias[0]){
mediaCon = document.querySelector(".media")
preview1.src = medias[0]["url"];
mediaCon.style.display = "block";
preview2con.style.display = "none";
preview3con.style.display = "none";
preview4con.style.display = "none";
previewcon.style.display = "none";
preview1con.style.display = "block";
preview1con.style.height = "100%";
if(medias[1]){
preview2.src = medias[1]["url"];
preview2con.style.display = "block";
previewcon.style.display = "block";
preview2con.style.height = "100%";
}
if(medias[2]){
preview3.src = medias[2]["url"];
preview3con.style.display = "block";
preview2con.style.height = "50%";
}
if(medias[3]){
preview4.src = medias[3]["url"];
preview4con.style.display = "block";
preview1con.style.height = "50%";
}
}
})
remove2.addEventListener("click", () =>{
mediaCon = document.querySelector(".media")
medias.splice(1, 1);
preview2con.style.display = "none";
if(medias[0]){
mediaCon = document.querySelector(".media")
preview1.src = medias[0]["url"];
mediaCon.style.display = "block";
preview2con.style.display = "none";
preview3con.style.display = "none";
preview4con.style.display = "none";
previewcon.style.display = "none";
preview1con.style.display = "block";
preview1con.style.height = "100%";
if(medias[1]){
preview2.src = medias[1]["url"];
preview2con.style.display = "block";
previewcon.style.display = "block";
preview2con.style.height = "100%";
}
if(medias[2]){
preview3.src = medias[2]["url"];
preview3con.style.display = "block";
preview2con.style.height = "50%";
}
if(medias[3]){
preview4.src = medias[3]["url"];
preview4con.style.display = "block";
preview1con.style.height = "50%";
}
}
})
remove3.addEventListener("click", () =>{
mediaCon = document.querySelector(".media")
medias.splice(2, 1);
preview3con.style.display = "none";
if(medias[0]){
mediaCon = document.querySelector(".media")
preview1.src = medias[0]["url"];
mediaCon.style.display = "block";
preview2con.style.display = "none";
preview3con.style.display = "none";
preview4con.style.display = "none";
previewcon.style.display = "none";
preview1con.style.display = "block";
preview1con.style.height = "100%";
if(medias[1]){
preview2.src = medias[1]["url"];
preview2con.style.display = "block";
previewcon.style.display = "block";
preview2con.style.height = "100%";
}
if(medias[2]){
preview3.src = medias[2]["url"];
preview3con.style.display = "block";
preview2con.style.height = "50%";
}
if(medias[3]){
preview4.src = medias[3]["url"];
preview4con.style.display = "block";
preview1con.style.height = "50%";
}
}
})
remove4.addEventListener("click", () =>{
mediaCon = document.querySelector(".media")
medias.splice(3, 1);
preview4con.style.display = "none";
if(medias[0]){
mediaCon = document.querySelector(".media")
preview1.src = medias[0]["url"];
mediaCon.style.display = "block";
preview2con.style.display = "none";
preview3con.style.display = "none";
preview4con.style.display = "none";
previewcon.style.display = "none";
preview1con.style.display = "block";
preview1con.style.height = "100%";
if(medias[1]){
preview2.src = medias[1]["url"];
preview2con.style.display = "block";
previewcon.style.display = "block";
preview2con.style.height = "100%";
}
if(medias[2]){
preview3.src = medias[2]["url"];
preview3con.style.display = "block";
preview2con.style.height = "50%";
}
if(medias[3]){
preview4.src = medias[3]["url"];
preview4con.style.display = "block";
preview1con.style.height = "50%";
}
}
})
</script>我的代码目前可以选择多个图像然后进行预览。我还可以通过在“媒体”数组中删除它们来从预览中删除图像。
所以我有一个 javascript 数组“媒体”，我在其中存储图像的名称 URL 和所有文件数据。我还想上传 4 张图片或 1 个视频。
我不太擅长 JavaScript，但我更了解 PHP。一个星期以来，我一直在努力寻找解决这个问题的方法。所以我非常感谢您的帮助。
【问题讨论】：
标签： javascript php