input上传图片并且实现预览

前言

在网站中，上传图片这个功能，这个还是挺常见的。比如说：在填写信息中，上传头像中。

提示：以下是本篇文章正文内容，下面案例可供参考

一、确定思路

整个功能，大致可以分为三个步骤。

• 点击选择图片的按钮，从本地选择一张图片。（选图片）
• 选择好之后，会进行预览。就好比自己微信要换头像，选择好之后，都会有预览的步骤。（预览）
• 点击确认上传的按钮，将选择好的图片，上传到后端。（上传）

二、书写代码

1.HTML部分

代码如下（示例）：

<button id="select_img_button">选择图片</button>
<input type='file' id="inputImgFile" style="display:none" accept="image/*" />

<!-- 预览图片S -->
<img src="" width="120" />
<!-- 预览图片E -->

<button id="resureUpload">确认上传</button>

在HTML部分中，其实要用到的DOM还是很少的。不过在整个功能开发过程中，是需要有一个input框选择图片用的。不过为了美化，将这个input文件选择框进行了隐藏。不过这个框，隐藏了的话，我们还是可以通过JS调用这个input框的方法来实现选择图片。下面js部分会讲到。

2.CSS部分

这一部分就自由发挥吧

3.JS部分（重点）

• 点击选择图片按钮，调用Input框的onclick事件方法，从而实现选择图片
• 将选择到的图片，转化为base64的形式
• 最终将图片发往后端

3.1.点击选择图片按钮，调用input文件框事件的的代码

代码如下（示例）：

select_img_button.onclick = function(){
    var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;

      if (ie) {
        inputImgFile.click();
      } else {
        var a = document.createEvent("MouseEvents");
        a.initEvent("click", true, true);
        inputImgFile.dispatchEvent(a);
      }
}

3.2.转换格式

当选择好图片之后，可以通过input框onchange事件，获取到刚才选择的图片。下一步之后就是预览了。获取到图片之后，需要将图片转为base64格式，这样子浏览器才能看懂，也就是说才能预览


代码如下（示例）：

inputImgFile.onchange = function(){
    my_data = inputImgFile.files[0];
    // 获取上传图片信息
    var reader = new FileReader();
    // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
    reader.addEventListener("load", function () {
        show_img.src = reader.result;
        }, false);
      // 调用reader.readAsDataURL()方法，把图片转成base64
      reader.readAsDataURL(my_data);
}

在readfFile方法中，文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null

3.3.发送图片给后端

这一部分是点击确认上传的按钮，通过formdata方法和ajajx方式，将图片上传给后端。

resureUpload.onclick = function(){
    var files = inputImgFile.files ? inputImgFile.files : [];
    // 获取上传图片的信息
    if (!files.length || !window.FileReader) {
      alert("当前浏览器不支持HTML5，请更新浏览器");
      return false;
    }
    
    var fd = new formData(); 
    fd.appchild("file",files[0]);
    
    var xhr = new XMLHTTPRequest();
    xhr.open("post", "后端上传地址");
    xhr.send(fd);
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            console.log("上传成功");
          }
        }
      }
}

三、编写优化

1.input文件框设置accept属性

在编写过程中，可以在input type=‘file’ 中添加accept="image/*"属性内容，规定用户只能选择的文件是图片。一来可以进一步优化代码，也可以减少用户乱传文件。

代码如下（示例）：

<input type="file" accept="image/*"/>