实现图片上传并显示

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Pencil1312/article/details/79442424

实现效果：

默认会显示一张自定义提示上传图片的默认图片，点击图片，实际上是点击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. 浅显地学习了如何实现图片上传功能。