JS /JQ文件、图片上传+图片预览（二进制、base64）

一、base64

<input type="file" id="file" />
<img src="" class="showimg" id="showimg" />

.showimg {
  width: 160px;
  height: 160px;
  border: 1px solid #fff;
}

var file = document.getElementById('file');
var image = document.getElementById("showimg");
  file.onchange = function () {
    var fileData = this.files[0];
    //获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件

    var pettern = /^image/;

    // console.info(fileData.type)

    if (!pettern.test(fileData.type)) {
      layer.alert("图片格式不正确");
      return;
    }
    var reader = new FileReader();
    reader.readAsDataURL(fileData);
    //异步读取文件内容，结果用data:url的字符串形式表示

    /*当读取操作成功完成时调用*/
    reader.onload = function (e) {
      // console.log(e); //查看对象
      var base64 = this.result
 //需要的数据 这里的this指向FileReader（）对象的实例reader

      image.setAttribute("src", base64)
    //将拿到的数据赋值给image
    }
  }

二、二进制

    //二进制的HTML同上
$('#file').on('change', function () {
   
    var fileData = this.files[0]
    //这里还是读取上传文件的第一个

    var pettern = /^image/;

    if (!pettern.test(fileData.type)) {
      layer.alert("图片格式不正确");
      $("#file").val('')
      return;
    }

    var formData = new FormData();
    //new一个空的FormData表单

    formData.append('filekey', fileData);
    //将用户选择的文件追加到formData表单对象中

    //此处用JQ的$.ajax会出现报文异常需另外设置 contentType 用原生发请求方式则无需设置
    var uploadfile = new XMLHttpRequest()
    uploadfile.open('post', 'http://xxxxxx:xxxx/uploadfile')
    uploadfile.send(formData);
    uploadfile.onload = function () {
      if (uploadfile.status == 200) {
        var res = JSON.parse(uploadfile.responseText)
        console.log(res.downurl);
        $('#showimg').attr('src', res.downurl)
      }
    }
  })