ajax上传文件

方法一:
// input标签的files属性 document.querySelector("#fileId").files // 返回的是一个文件列表数组


// 获得上传文件DOM对象
var oFiles = document.querySelector("#fileId");


// 实例化一个表单数据对象
var formData = new FormData();



// 遍历图片文件列表,插入到表单数据中
for (var i = 0, file; file = oFiles[i]; i++) {
    // 文件名称,文件对象
    formData.append(file.name, file);
}


// 实例化一个AJAX对象
var xhr = new XMLHttpRequest();
xhr.onload = function() {
    alert("上传成功!");
}
xhr.open("POST", "upload.php", true);

// 发送表单数据
xhr.send(formData);

方法二:
$('.J-upfile-img').off('change').on('change', function(e){
                (function (){
                    var files = e.target.files || e.dataTransfer.files,
                        file = files[0],
                        xhr = new XMLHttpRequest();
                    if (xhr.upload) {
                        // 上传中
                        xhr.upload.addEventListener("progress", function(e) {
                            //self.onProgress(file, e.loaded, e.total);
                        }, false);
            
                        // 文件上传成功或是失败
                        xhr.onreadystatechange = function(e) {
                            if (xhr.readyState == 4) {
                                if (xhr.status == 200) {
                                    console.log(xhr)
                                    var oJson = strToJson(xhr.responseText)
                                    // 上传成功后的处理代码
                                } else {
                                    //self.onFailure(file, xhr.responseText);     
                                }
                            }
                        };
            
                        // 开始上传
                        // console.log(config.ajaxUrl.commonUpload)
                        xhr.open("POST", config.ajaxUrl.UploadFlow, true);
                        //xhr.open("POST", "http://localhost/activity/a.php", true);
                        xhr.setRequestHeader("X_FILENAME",  file.name);
                        //xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
                        xhr.send(file);
                    }
                })()
                // _this.$editor().wrapSelection("insertImage", "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=310018376,1171997472&fm=58", !0)
            })

  

 
原文地址:https://www.cnblogs.com/youzhuxiaoyao/p/7170639.html