欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

实现图片上传并显示

程序员文章站 2022-07-15 11:44:08
...

实现效果:

默认会显示一张自定义提示上传图片的默认图片,点击图片,实际上是点击input,然后进入图片选择步骤,选中图片保存后,选中的图片就能替换默认图片显示出来。

html代码:

<label>图片</label>
<div class="upload-img">
    <input id="img-upload" type="file" name="img" accept="image/*">
    <img id="img-show" src="默认图片文件路径" class="img-polaroid" width="170" height="170" alt="上传图片" title="上传图片">  
</div>

css样式:

.upload-img{position:relative;}
.upload-img input{opacity: 0;border: 1px solid red;width: 177px;height: 164px;position: absolute;z-index: 1;}

jQuery代码:

<script type="text/javascript">
    $('#img-upload').change(function(e){
        var input = $("#img-upload");
        var file = input[0].files[0];//获取input上传的文件
        if(!file.name){
            alert("未选择图片");
        }else{
            //高版本浏览器对文件上传路径进行了安全处理,无法直接通过获取input的value进行访问,故转化为获取图片的url进行安全访问
            var url = window.URL.createObjectURL(file);//将上传的文件转化为url
            $("#img-show").attr('src', url);//更新img的src属性
        };
    });
</script>

过程收获:

  1. 版本高的浏览器目前都支持本地文件和浏览器分离。就本实例解释就是,input上传好文件后,其value值并非直接显示图片在电脑中的位置,而是显示如下:c:\fakepath\图片名称。故无法直接通过获取input的value值实现图片显示。

  2. 以前一直以为js的document.getElementById(“container-id”)和jQuery的$(“#container-id”)等价,实际上前者返回的是HTMLDOM,而后者返回的是jQuery对象,两者并不等价。但jQuery对象可以通过[index]或.get(index)来转化为HTMLDOM,如代码所示。

  3. 浅显地学习了如何实现图片上传功能。