Javascript jQuery-src和背景图像的图像上传程序

我有一个使用

src

的图像上传程序，但是如果我使用

背景图像将图像更改为
div
，上传程序无法读取文件，因为它不是来自src

我想将图像作为
背景图像
上传到
.uploader--bg
和
src
上传到
.uploader--src

目前只有第二个上传程序可以在文件映像是带有src的映像的情况下工作。如何启用第一个使用
背景图像而不是
img
src
的上传程序


$（函数（）{
$（“.file drag”）。单击（函数（事件）{
$（this）.sides（“.file upload”）。单击（）；
});
$（“.uploader--src”）.each（函数（）{
var imageNote=$（this.find（“.start”），
image=$（this.find（“.file image”）；
if（image.attr（“src”）.length>0）{
imageNote.addClass（“隐藏”）；
image.removeClass（“隐藏”）；
}否则{
imageNote.removeClass（“隐藏”）；
image.addClass（“隐藏”）；
}
});
$（“.uploader--bg”）.each（函数（）{
var imageNote=$（this.find（“.start”），
image=$（this.find（“.file image”），
imageBg=$（this）.closest（“.uploader--bg”）.find（“.file image”）；
if（imageBg.css（“背景图像”）！=“”）{
imageNote.addClass（“隐藏”）；
imageBg.removeClass（“隐藏”）；
}否则{
imageNote.removeClass（“隐藏”）；
imageBg.addClass（“隐藏”）；
}
});
功能上传（项目）{
var form=$（this.find（“form.uploader”），
fileSelect=$（this.find（“.file upload”），
fileDrag=$（this.find（“.file drag”），
submitButton=$（this.find（“.submit按钮”）；
函数Init（）{
$（文件）。关于（“变更”、“形式”、功能（e）{
秘书长（e）；
});
//XHR2可用吗？
var xhr=new XMLHttpRequest（）；
if（xhr.upload）{
如果（IsAdvancedDupLoad）{
$（文件）
.在(
“dragstart dragend dragover dragenter dragleave”，
“表格”，
职能（e）{
//fileDragHover（e）；
e、 预防默认值（）；
e、 停止传播（）；
}
)
.on（“dragover dragenter”，“form”，function（e）{
e、 预防默认值（）；
e、 停止传播（）；
$（e.target）.addClass（“是dragover”）；
})
.on（“dragleave Dragen drop”，“form”，function（e）{
e、 预防默认值（）；
e、 停止传播（）；
$（e.target）.removeClass（“is dragover”）；
})
.开启（“放下dragover”，“主体”，功能（e）{
e、 预防默认值（）；
e、 停止传播（）；
})
.关于（“下降”、“形式”、功能（e）{
e、 预防默认值（）；
e、 停止传播（）；
秘书长（e）；
});
}
}
}
函数fileDragHover（e）{
e、 停止传播（）；
e、 预防默认值（）；
e、 target.className=
e、 类型==“dragover”？“悬停”：“模态体文件上载”；
}
异步函数fileSelectHandler（e）{
var theForm=$（e.target）.parent（“form.uploader”）；
var files=e.target.files | | e.originalEvent.dataTransfer.files；
//处理所有文件对象
for（设i=0；i图像背景不透明”
);
}
}
}
//输出
函数输出（msg）{
//回应
var m=$（item.find（“.message”）；
m、 html（msg）；
}
函数hasAlpha（文件）{
返回新承诺（（解决、拒绝）=>{
让hasAlpha=false；
const canvas=document.querySelector（“canvas”）；
const ctx=canvas.getContext（“2d”）；
const img=新图像（）；
img.crossOrigin=“匿名”；
img.onerror=拒绝；
img.onload=函数（）{
canvas.width=img.width；
canvas.height=img.height；
ctx.drawImage（img，0,0）；
const imgData=ctx.getImageData（0，0，canvas.width，canvas.height）
.数据；
对于（设j=0；j”+encodeURI（file.name）+“”）；
//var fileType=file.type；
//log（文件类型）；
var imageName=file.name；
var isGood=/\（？=svg|jpg|png|jpeg）/gi.test（imageName）；
如果（是好的）{
$（thisForm）.find（“.start，.notimage”）.addClass（“hidden”）；
$（thisForm）.closest（.checkalpha”）.find（.response”）.addClass（“hidden”）；
$（thisForm）.find（“.error image”）.addClass（“hidden”）；
$（此表格）
.find（“label.has advanced upload”）
.removeClass（“具有高级上载”）；
$（此表格）
.find（“.file图像”）
.removeClass（“隐藏”）
.attr（“src”，URL.createObjectURL（文件））；
}否则{
$（thisForm）.find（“.error image”）.removeClass（“hidden”）；
$（此表格）
.最近（“.checkalpha”）
.find（“.response，.file image”）
.addClass（“隐藏”）；
$（thisForm）.find（“.file upload form”）.trigger（“reset”）；
$（此表格）
.查找（'l
function getImageLocation(element) {
    if (element.tagName.toLowerCase() === "img") {
        return element.src;
    }
    var rawSource = element.style["background-image"];
    //The raw value looks like url("somepath")
    //Let's extract somepath
    return rawSource.replace(`url("`, ``).replace(`url('`, ``).replace(`")`, ``).replace(`')`, ``);
}

if($(thisForm).find(".file-image").css("background-image") != "none") {
    $(thisForm)
       .find(".file-image")
       .css("background-image", "url("+URL.createObjectURL(file)+")");
} else {
    $(thisForm)
       .find(".file-image")
       .removeClass("hidden")
       .attr("src", URL.createObjectURL(file));
}