js实现图片上传的预览效果

来源：互联网发布：sqlserver聚合函数编辑：程序博客网时间：2024/06/10 09:46

见代码：

上传图片示例：

html:

<img   src="" id="img1" class="img-responsive" alt="Cinque Terre" style="display:none;" width="100px" height="100px">  <input type="file"  id="input1" onchange="preview(1)" name="icon">

js:

<script type="text/javascript">//上传图片前先显示出来function preview(id){    var file = document.getElementById('input'+id).files[0];    var url ;     if (window.createObjectURL!=undefined) { // basic        url = window.createObjectURL(file) ;    } else if (window.URL!=undefined) { // mozilla(firefox)        url = window.URL.createObjectURL(file) ;    } else if (window.webkitURL!=undefined) { // webkit or chrome        url = window.webkitURL.createObjectURL(file) ;    }    document.getElementById("img"+id).src=url;    if(url){    document.getElementById("img"+id).style.display="block";}}</script>

更改图片示例：
html:

<img   src="xxx" id="img1" class="img-responsive" alt="Cinque Terre" width="100px" height="100px"> <input type="file" id="input1" onchange="preview(1)" name="icon">

js:

<script type="text/javascript">//上传图片前先显示出来function preview(id){    var file = document.getElementById('input'+id).files[0];    var url ;     if (window.createObjectURL!=undefined) { // basic        url = window.createObjectURL(file) ;    } else if (window.URL!=undefined) { // mozilla(firefox)        url = window.URL.createObjectURL(file) ;    } else if (window.webkitURL!=undefined) { // webkit or chrome        url = window.webkitURL.createObjectURL(file) ;    }    document.getElementById("img"+id).src=url; }</script>

注：

注意image和input两个标签id值的特点，js是根据id值来绑定的

阅读全文

0 0