用H5上传文件

//1,第一步读取用户选中的文件

<input type="file" accept="image/*"  onchange = "selectedFile()"/>

function selectedFile(){

    var oFile = event.target.files[0];

    var fileReader = new FileReader();

    fileReader.onload = function(){

      var base64URL =  this.result ；

      var blob = convertBase64UrlToBlob(base64URL,'image/jpeg');

      uploadImage(blob);

    }

    fileReader.readAsDataURL(oFile)

}

//2,第二步将base64图片转换为Blob对象

 function convertBase64UrlToBlob(urlData, filetype){

            //去掉url的头，并转换为byte

            var bytes = window.atob(urlData.split(',')[1]);

            //处理异常,将ascii码小于0的转换为大于0

            var ab = new ArrayBuffer(bytes.length);

            var ia = new Int8Array(ab);

            var i;

            for (i = 0; i < bytes.length; i++) {

                ia[i] = bytes.charCodeAt(i);

            }

            return new Blob([ab], {type : filetype});

}

//3,第三步使用formData上传数据

function uploadImage(blob){

  var formData = new FormData();

    formData.append('userProfile',blob);

    var xhr = new XMLHttpRequest();

    // xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  // 将参数解析成传统form的方式上传

    xhr.open('post', '/upload.php',true);
　　xhr.onload = fn();//上传成功事件监听
　　xhr.onerror = fn(); //上传失败事件监听

    xhr.send(formData);

}

一种更简便的H5上传方式

var change = function(){

        var file = event.target.files[0];

        var fileReader = new FileReader();

        fileReader.onload = function(){

            var result = this.result;

            var blob = new Blob([result],{type:file.type});

            var formData = new FormData();

            formData.append('userAvatar',blob,file.name);
　　　　　　　//添加其他表单字段

            formData.append('username',document.getElementById("uname").value)

            formData.append('pwd',document.getElementById("upwd").value);

            $.ajax({

                type:"post",

                url:"http://localhost:3000/uploads",

                async:true,

                processData:false,

                contentType:false,

                data:formData,

                timeout:6000,

                success:function (data) {

                    console.log('upload success')

                },

                error:function (xhr,text) {

                    if(text === 'timeout'){

                        xhr.abort();

                    }

                }

            });

        }

        fileReader.readAsArrayBuffer(file);

    }