input上传图片并预览

首先说一下input

你们都知道上传文件，图片是经过input 的file进行上传的。

1. 首先是样式

你们都知道input在HTML的代码为 <input type="file">；在页面的样式是不能够更改的，以下图

可是最为一个投机取巧的前端，一切样式都是能够修改的。
效果图以下

代码：
<input type="file" name="file" id="file" class="inputfile" />
<label for="file" class='btn btn-success'>Choose a file</label>
其中隐藏input原始样式的办法有几种我就随便写几个仅作参考。也就是类.inputfile的css内容

.inputfile { opacity: 0; }

或者

.inputfile { position:absolute;clip:rect(0 0 0 0); }

也能够

.inputfile { z-index: -11111; width: 0px; height: 1px; }

总之有不少办法，只是给你们一个思路。

2. input的file类型控制

input的标签有一个accept属性，accept 属性只能与 <input type="file"> 配合使用。它规定可以经过文件上传进行提交的文件类型。
由于咱们须要作的是上传图片因此这里咱们是<input type="file" accept="image/*">；效果图以下

可是在Chrome浏览器下，可能会有文件选择窗口打开很是慢点（大约慢5秒左右呢）问题，所以，若是仅仅是上传图片，建议使用：<input type="file" accept="image/png, image/jpeg, image/gif, image/jpg">
固然accept还有一些其余的值，如

<input type="file" webkitdirectory directory multiple/>

        <label for="file">上传文件夹</label>

        <br>

        <input type="file" accept="application/pdf"/>

        <label for="file">上传pdf文件</label>

        <br>

        <input type="file" accept="audio/x-mpeg"/>

        <label for="file">上传mp3文件</label>

        <br>

        <input type="file" accept="text/html"/>

        <label for="file">上传html文件</label>

多个属性值使用逗号分隔<input accept="audio/*,video/*,image/*">

3. 在form中的使用

若是想使用浏览器原生特性实现文件上传(如图片)效果，父级的form元素有个东西不能丢，就是：enctype="multipart/form-data" enctype属性规定在发送到服务器以前应该如何对表单数据进行编码，默认的编码是：”application/x-www-form-urlencoded“。对于普通数据是挺适用的，可是，对于文件什么的，就不能乱编码了，该什么就是什么，只能使用multipart/form-data做为enctype属性值。

4. 图片预览

简单的来讲就是，就是替换img的src；而读取URL有filereader 和 URL.createObjectURL 两种预览方式。这两种方式能够得到上传图片的名字（name）

---

filereader 的方法：

//filereader 的方法
<form action="" enctype="multipart/form-data">

    <input id="file" class="filepath" onchange="changepic(this)" type="file"><br>

    <img src="" id="show" width="200">

</form>

<script>
 function changepic() {
 var reads= new FileReader();
 f=document.getElementById('file').files[0];
 reads.readAsDataURL(f);
 reads.onload=function (e) {
 document.getElementById('show').src=this.result;
 };
 }
 </script>

createObjectURL的方法

//createObjectURL的方法
<form action="" enctype="multipart/form-data">

    <input id="file" class="filepath" onchange="changepic(this)" type="file"><br>

    <img src="" id="show" width="200">

</form>

<script>
 function changepic(obj) {
 //console.log(obj.files[0]);//这里能够获取上传文件的name
 var newsrc=getObjectURL(obj.files[0]);
 document.getElementById('show').src=newsrc;

 }
 //创建一個可存取到該file的url
 function getObjectURL(file) {
 var url = null ;
 // 下面函数执行的效果是同样的，只是须要针对不一样的浏览器执行不一样的 js 函数而已
 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) ;
 }
 return url ;
 }
 </script>

以上是两种方法，按照前辈们的说法，creatObjectURL能够有更好的性能，或许是浏览器自带接口的缘由, 能够处理的更快。
基于上述的了解的方法，本身作了一个demo；效果图以下，

预览图以下：

由于文件太大；详细资源代码请到图片上传预览下载；如急需的请留言。

原文地址：https://blog.csdn.net/weixin_38023551/article/details/78318532