ajax图片上传

Ajax方式上传图片，使用FormData进行Ajax请求

      <input type="file" name="imgFile" id="imgFile">
      <input type="button"  id="upBtn">

<script type="text/jscript">
 
       $(function () {
           $("#upBtn").click(function () {
               var fileObj = document.getElementById("imgFile").files[0]; // js 获取文件对象
               if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
                   alert("请选择图片");
                   return;
               }
               var formFile = new FormData();
               formFile.append("file", fileObj); //加入图片对象
 
               // ajax 提交
               var data = formFile;
               $.ajax({
                   url: "xxxx",
                   data: data,
                   type: "Post",
                   dataType: "json",
                   cache: false,//上传文件无需缓存
                   processData: false,//用于对data参数进行序列化处理 这里必须false
                   contentType: false, //必须
                   success: function (result) {
                       console.log("完成!");
                   },
               })
           })
       });
                //XMLHttpRequest 方式
               //var xhr = new XMLHttpRequest();
               //xhr.open("post", "http://xxx", true);
               //xhr.onload = function () {
               //    console.log("完成!");
               //};
               //xhr.send(formFile);
 
   </script>

                                ******base64方式上传******

    var eleFile = document.querySelector('#imgFile');
    eleFile.addEventListener('change', function () {
        var file = this.files[0];
        if (file.type.indexOf("image") == 0) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                // base64
                var base64= this.result;
                preview.style.backgroundImage = 'url(' + base64+ ')';

            };
        }
    });

补充 IE8 不支持.files 写法