如何浏览img src javascript

这是我需要做的。所以我有这样的代码如何浏览img src javascript

<input type="file" id="uploadImage" name="image" /> 
    <input type="submit" id="ImageName" name="submit" value="Submit">

所以，当我点击“选择...”按钮来浏览图片，我想，图像的路径保存在一个变量。

或者基本上我需要做的是使这条路径成为图像的src。

$('#Imageholder').append('<img src="" class="ImgCoords" >');

任何想法？

很抱歉，如果解释不好：

来源

2013-09-25 Kiril Velichkov

所以，你希望用户从他们的计算机选择一个图像，然后在屏幕上显示呢？ –

也许你可以查看w3c规范：http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html#dom-input-src：'属性DOMString src;' – AvL

这样的事情：http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded –

如果您正在使用HTML5，就可以了。

，如果你不使用HTML5

出于安全考虑，您不能这样做that.html看到这里的File API.通过W3C

低于重点线的，从API

var file = document.getElementById('file').files[0];

但无法访问文件系统信息。

可能是有用的：Preview an image before it is uploaded

来源

2013-09-25 15:03:56

感谢百万Yuriy Galanter工作正常！ @Suresh ATTA - 我知道安全原因谢谢你的时间:) –

如何做到这一点SURESH？ –

谢谢苏雷什，但答案并非如此。解决方案就是Yuriy Galanter在评论中所说的。他给了我一个链接，解决方案在链接里面。 –

这里是我做了一个例子，它适应你的需要：

DEMO HERE

我增加了一个按钮来删除上传的文件，如果你不像显示/隐藏效果只是删除slow，图片只显示上载：

$('#blah').hide(); 
$('#remove').hide(); 
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(){ 
     if($('#imgInp').val()!=""){ 

      $('#remove').show(); 
      $('#blah').show('slow'); 
     } 
     else{ $('#remove').hide();$('#blah').hide('slow');} 
     readURL(this); 
    }); 


    $('#remove').click(function(){ 
      $('#imgInp').val(''); 
      $(this).hide(); 
      $('#blah').hide('slow'); 
      $('#blah').attr('src','http://upload.wikimedia.org/wikipedia/commons/thumb/4/40/No_pub.svg/150px-No_pub.svg.png'); 
});

HTML代码：

<form id="form1"> 
    <input type='file' id="imgInp" name='image'/> 
    <img id="blah" src="#" alt="your image" /> 
</form>

来源

2013-09-25 15:06:20

如何浏览img src javascript

回答

相关问题