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

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

jquery html

使用jquery在单击按钮时替换文件夹中的图像,jquery,html,Jquery,Html,我有一个带有按钮和imageview的html页面。现在我需要的是，我想打开包含图像的文件夹，单击按钮，当我从文件夹中选择一个特定图像时，该图像需要加载到该图像视图中。我希望在jquery的帮助下完成这项工作，这样我就不会更改代码中的任何内容。注意：“我的图像”文件夹包含10幅不同扩展名的图像，如jpeg和png。只需单击一个按钮，即可选择需要加载到my imageview中的新图像我的示例代码： <html> <body> <button id="btn"&

我有一个带有按钮和imageview的html页面。现在我需要的是，我想打开包含图像的文件夹，单击按钮，当我从文件夹中选择一个特定图像时，该图像需要加载到该图像视图中。我希望在jquery的帮助下完成这项工作，这样我就不会更改代码中的任何内容。注意：“我的图像”文件夹包含10幅不同扩展名的图像，如jpeg和png。只需单击一个按钮，即可选择需要加载到my 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>

我不熟悉这一点，请帮助我实现这一点。提前感谢您

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

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

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

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

希望这可能会对某人有所帮助：

请发布您的代码。我需要在what's app on按钮中更改个人资料图片click@AndroidOptimist嗯…像是从画廊加载图像？是的，像是that@AndroidOptimist好的。我试试。等等。@AndroidOptimist有一些jquery插件可用于此。您可以搜索最适合选择的。名单如下：