Javascript 通过使用预览上载图像来动态更改图像

我想要的是-（wysiwyg编辑器仅用于图像）当用户单击我html页面的任何图像时，应该会出现“选择文件”按钮选项，而不写入任何标记，并且我不想将该图像上载到服务器，因此不需要使用php或任何其他工具，只想预览它。 我为实现这一目标做了什么

//image that already there in html page
<div id="headshot" class="quickFade">
  <img id="blah" src="#" alt="your image" />
</div>
//grab the id of parent element of clicked image
$('img').click(function(event){
  if (event.target.nodeName == 'IMG'){
    var pratik = event.target.parentNode.id; 

// creates <input type="file" id="imgInp">  

var newElem = document.createElement('input');
    newElem.type = "file";      
    newElem.id = "imgInp";

    document.getElementById(pratik).appendChild(newElem);
  }
})

// preview the image after uploading the image and then remove the "choose file" button 
function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$('#imgInp').change(function() {

document.getElementById("imgInp").remove();
  readURL(this);
});

//html页面中已经存在的图像
//获取单击图像的父元素的id
$（'img'）。单击（函数（事件）{
如果（event.target.nodeName=='IMG'）{
var pratik=event.target.parentNode.id；
//创造
var newElem=document.createElement（'input'）；
newElem.type=“文件”；
newElem.id=“imgInp”；
document.getElementById（pratik）.appendChild（newElem）；
}
})
//上传图像后预览图像，然后删除“选择文件”按钮
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#blah'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}
$（'#imgInp'）.change（function（）{
document.getElementById（“imgInp”）.remove（）；
readURL（this）；
});

整个代码在

下面动态生成

，因此如下所示

<div id="headshot" class="quickFade">
  <img id="blah" src="#" alt="your image" />
<input type="file" id="imgInp">
</div>

上载过程正在运行，但预览和在预览后删除按钮功能不起作用

但是，当我通过编辑html文件，然后在预览功能开始工作后删除按钮，手动放置此代码时。

---

感染功能不依赖于此代码

位置我的意思是我可以放在任何我想要的地方，并且仍然可以预览和删除功能，但是当此代码

是通过上述JavaScript动态显示的代码时，则会出现此问题它不工作的原因，是因为元素是动态创建的，所以需要使用事件委派来检测DOM中的更改。为此，您可以使用JQuery

on（）

方法并将委托指定为静态父级。试试这个

//获取单击图像的父元素的id
$（'img'）。单击（函数（事件）{
如果（event.target.nodeName=='IMG'）{
var pratik=event.target.parentNode.id；
//创造
var newElem=document.createElement（'input'）；
newElem.type=“文件”；
newElem.id=“imgInp”；
document.getElementById（pratik）.appendChild（newElem）；
}
})
//上传图像后预览图像，然后删除“选择文件”按钮
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#blah'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}
//这就是你需要改变的一切
$（'#headshot'）。关于（'change'，'#imgInp'，函数（）{
document.getElementById（“imgInp”）.remove（）；
readURL（this）；
});
它不起作用的原因是元素是动态创建的，因此需要使用事件委派来检测DOM中的更改。为此，您可以使用JQuery
on（）
方法并将委托指定为静态父级。试试这个


//获取单击图像的父元素的id
$（'img'）。单击（函数（事件）{
如果（event.target.nodeName=='IMG'）{
var pratik=event.target.parentNode.id；
//创造
var newElem=document.createElement（'input'）；
newElem.type=“文件”；
newElem.id=“imgInp”；
document.getElementById（pratik）.appendChild（newElem）；
}
})
//上传图像后预览图像，然后删除“选择文件”按钮
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#blah'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}
//这就是你需要改变的一切
$（'#headshot'）。关于（'change'，'#imgInp'，函数（）{
document.getElementById（“imgInp”）.remove（）；
readURL（this）；
});


让$img=null；
常量$fileInput=$（“”{
附于：'正文'，
接受：“image/*”，
键入：“文件”，
隐藏：是的，
关于：{
更改：功能（ev）{
const F=ev.target.files；
如果（！F | |！F[0]）返回；
if（！（/^image\/（jpe？g | png | gif）$/）.test（F[0].type））返回警报（“仅使用图像”）；
$img.one（'load'，ev=>URL.revokeObjectURL（ev.target.src））.prop（'src'，URL.createObjectURL（F[0]））
}
}
});
$（'img'）。在（'click'，function（）上{
$img=$（此项）；
$fileInput.click（）；
});

单击以替换
单击以替换

让$img=null；
常量$fileInput=$（“”{
附于：'正文'，
接受：“image/*”，
键入：“文件”，
隐藏：是的，
关于：{
更改：功能（ev）{
const F=ev.target.files；
如果（！F | |！F[0]）返回；
if（！（/^image\/（jpe？g | png | gif）$/）.test（F[0].type））返回警报（“仅使用图像”）；
$img.one（'load'，ev=>URL.revokeObjectURL（ev.target.src））.prop（'src'，URL.createObjectURL（F[0]））
}
}
});
$（'img'）。在（'click'，function（）上{
$img=$（此项）；
$fileInput.click（）；
});

单击以替换
单击以替换
同样，我还需要一个颜色选择器来更改任何单击元素的颜色。这可能会对你有所帮助@gigabyteservice我不理解你的评论。。。对谁有用？具体目的是什么？我想更改单击元素的颜色。我试过了，但没用。当用户单击任何元素（例如页脚）时，在单击“htm5颜色选择器”后应出现，然后用户可以选择颜色。应该立即进行更改，就像您在“上载图像”中所做的那样。请参阅下面的代码，但它不起作用，可能是我们可以使用setAttribute（“style”），添加内联CSS。同样，我还需要一种颜色