javascript - 使用捕获的字段值中的图像更新 div

Question

我在 JS 中有一些旧代码，想将其转换为使用 jQuery。我不是 JS 程序员，不知道该怎么做？

<script type="text/javascript">
function img_show()
{
    piccontainerobj=document.getElementById("pictureareaG")
    piccontainerobj.innerHTML='<img src="image.php/image-name.jpg?width=750&image='+''+document.RecordArticle.article_foto.value+'">'

}
</script>

我有一个 ID 为 pictureareaG 的 DIV，我的文章照片是一个输入字段。

当页面加载时，我已经可以在照片字段中获得一些信息，因此我需要显示加载的图像。每次用户在输入字段中输入一些文件名或类型时，每个新字符都会更改该字段，因此是否可以像自动完成一样捕获它？

Answer 1

1. 下载并加载 jQuery(或使用 CDN)- 注意版本 2 与 ie8 不兼容
2. 假设您的文章照片是一个输入字段，试试这个

---

简单版

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function img_show() {
 $("#pictureareaG").html('<img src="image.php/image-name.jpg?width=750&image="+
   $("input[name='article_foto']").val()+'">');
}
</script>

---

使用更改和 keyup 处理程序

Live Demo

function showImage() {
  var val = this.value;
  if (val.length) { // if field has any value
    var src = "image.php/image-name.jpg?width=750&image="+val;
    $("#pictureareaG").html($('<img/>',{src:src}));
  }
}
$(function() { // when page loaded
  $("input[name='article_foto']").on({
    "change": showImage, // when the field changed
    "keyup" : showImage // when input
  }).change(); // assign and trigger 
});

改变

if (val.length) { // if field has any value

到

if (["gif","jpg","png"].indexOf(val.split('.').pop())>-1) { //image only

如果您想测试用户是否输入了图像名称，但由于您在 URL 中间有一个点，因此在您的情况下它永远不会为真