Question

我有一个带有按钮和imageview的html页面。现在我需要的是我想在按钮点击时打开包含图像的文件夹，当我从文件夹中选择需要在该图像视图中加载图像的特定图像时。我想在jquery的帮助下这样做，这样我就不应该在代码中改变任何东西。注意：我的图像文件夹包含10个不同扩展名的图像，如jpeg和png。只需按一下按钮，然后选择需要在我的imageview中加载的新图像

我的示例代码：

<html>
<body>

<button id="btn">Image</button>
<div class="ImageView">
<img src="images/imag1.png">    **// here i would like to add my image dynamically on click**
</div>

</body>
</html>

对此我是新手并且善意帮助我实现这一点。谢谢提前

Answer 1

要在点击按钮时更改图像路径，您可以尝试以下操作：

$('#button_id').click(function(){
    $('#img_id').attr('src', 'your path here');
    });

Answer 2

最后我解决了问题，代码是

  <style>
      .thumb {
        height: 100px;    
        width:100px;
      }
    </style>


    <input type="file" id="files" name="files[]" multiple />
    <output id="list"></output>

    <script>
    function handleFileSelect(evt) 
    {   
        var files = evt.target.files;   
        var output = [];
        for (var i = 0, f; f = files[i]; i++) 
        {      

        if (!f.type.match('image.*')) 
        {       
            continue;
        }
        var reader = new FileReader();

            reader.onload = (function(theFile) 
            {
                        return function(e) 
                {               
                    var span = document.createElement('span');                  
                    var str1 = ['<img class="weather_detail" src="'+ e.target.result +'" title="', escape(theFile.name), '"/>'].join('');               
                    span.innerHTML = str1;  
                    document.getElementById('list').insertBefore(span, null);
                };
            })(f);

            reader.readAsDataURL(f);
        }
        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
      }

      document.getElementById('files').addEventListener('change', handleFileSelect, false);
    </script>

希望这可以帮助某人：）

使用jquery在按钮单击上替换文件夹中的图像

2 个答案: