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

我在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>

函数img_show（）
{
piccontainerobj=document.getElementById（“PictureAeag”）
piccontainerobj.innerHTML=''
}

我有一个id为pictureaeaeag的DIV，我的文章foto是一个输入字段

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

下载并加载jQuery（或使用a）-注意版本2与ie8不兼容

假设你的文章foto是一个输入字段，试试这个

---

简单版

到

如果你想测试用户输入了一个图像的名称，但是既然你在URL中间有一个点，那么在你的情况下，它就永远不会是真的：

<代码>函数imgxSub（）

function img_show()
{
    piccontainerobj = $("#pictureareaG");
    piccontainerobj.html('<img src="image.php/image-name.jpg?width=750&image='+''+document.RecordArticle.article_foto.value+'">')
}

{ piccontainerobj=$（“#PictureAeag”）； piccontainerobj.html（“”） } 尽管更具可读性的方法可能是：

function img_show()
{
    var piccontainerobj = $("#pictureareaG"),
        recordArticle = document.RecordArticle.article_foto.value,
        imgSrc= "image.php/image-name.jpg?width=750&image='" + recordArticle + "'",
        newImg = $("<img />",{"src":imgSrc});
    piccontainerobj.html(newImg);
}

函数img_show（）
{
var piccontainerobj=$（“#pictureareaG”），
recordArticle=document.recordArticle.article\u foto.value，
imgSrc=“image.php/image name.jpg？width=750&image=”+recordArticle+”，
newImg=$（“
这样做可以更容易地在对象文本中指定其他属性。
在使用jQuery库之前一定要加载它。

function img_show() {
    piccontainerobj = $('#pictureareaG');
    piccontainerobj.html('<img src="image.php/image-name.jpg?width=750&image=' + '' + $(document.RecordArticle.article_foto).val() + '">');
}

函数img_show（）{
piccontainerobj=$（“#PictureAeag”）；
piccontainerobj.html（“”）；
}
怎么样

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
    $('input[name="article_foto"]').change(function(){
       var foto = this.value,
           newElement = $('<img/>',{
                src: 'image.php/image-name.jpg?width=750&image='+foto
            });
       $('#pictureareaG').html(newElement);
    });
});
</script>


$（函数（）{
$（'input[name=“article_foto”]”）。更改（函数（）{
var foto=此.value，
新元素=$（'
这有什么问题？它可能容易受到基于DOM的XSS的攻击！我也这么想，但在我看来这有点过头了opinion@mplungjan它有点..但它允许最大程度的定制..（添加处理程序等）还有，为什么不像我那样全力以赴，用JQ获取字段的值呢？@mplungjan我考虑过，但不确定它是什么类型的元素..它可能是滥用
文档
，通过在其上存储属性，a
选择
等等..我认为你做不到。html（）就像你一样..html需要一个字符串。哦，是的，我忘记了引号。我现在就来修复它。什么引号？我认为你做不到。html（jQueryObject）看起来真的很简单！！谢谢。可能只是多一个问题。是的，我的文章foto是一个输入字段，我想在用户输入一些文件名时应用函数img_show-所以当foto字段被更改时。我如何捕捉这个事件？很好。它可以工作，但是…好的，当页面加载时，我可以在foto字段中已经有一些信息，所以我需要/可以已经显示图像了。如果我输入一些文件名并离开此字段，它就会工作。当我在同一字段中键入时，它不会工作…你是什么意思？脚本如何知道您何时完成，除非您离开该字段或单击按钮？我不确定如何…但当我在输入字段中键入时，每个新字符字段都会发生变化，因此是否也可以捕获它（不仅仅是离开字段）。像自动完成一样工作……页面加载时的大小写-如果我在字段中已经有一些信息，我如何显示图像？我已经更新以测试.gif、.png、.jpg的存在，但我现在意识到我不知道你的名称标准是什么。如果你使用
if（val.length）{
相反，它将加载image=a、image=aa等
function img_show()
{
    piccontainerobj = $("#pictureareaG");
    piccontainerobj.html('<img src="image.php/image-name.jpg?width=750&image='+''+document.RecordArticle.article_foto.value+'">')
}

function img_show()
{
    var piccontainerobj = $("#pictureareaG"),
        recordArticle = document.RecordArticle.article_foto.value,
        imgSrc= "image.php/image-name.jpg?width=750&image='" + recordArticle + "'",
        newImg = $("<img />",{"src":imgSrc});
    piccontainerobj.html(newImg);
}

function img_show() {
    piccontainerobj = $('#pictureareaG');
    piccontainerobj.html('<img src="image.php/image-name.jpg?width=750&image=' + '' + $(document.RecordArticle.article_foto).val() + '">');
}

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
    $('input[name="article_foto"]').change(function(){
       var foto = this.value,
           newElement = $('<img/>',{
                src: 'image.php/image-name.jpg?width=750&image='+foto
            });
       $('#pictureareaG').html(newElement);
    });
});
</script>