javascript - Ajax获取的页面无法使用input type = "file"标签？

Question

我通过Ajax获取表单页面。下面是一种形式的代码:

enter code here
<form  method="post" enctype="multipart/form-data" class="form-horizontal">
    <div class="form-group" style="margin-left:0px;">
        <label for="file">注：选择头像文件尽量小于2M</label>
        <input id="headPortraitFile" type="file" name="portrait"> 
    </div>
    <button id="headPortraitSubmit" type="button" class="btn-sm btn-primary">上传头像</button>
</form>

但浏览器中输入type=“file”的形式并不能直接选择文件，更不用说提交的文件了。不知是什么原因？这两天还没解决，求大神!!!!!!

这是 Ajax 代码:1.我通过以下方式获取表单页面:

$(Document).on("click", '#headPortrait', function() {
    $.get("/headPortrait", function(data) {
        $(".bodyPart").children().remove();
        $(".bodyPart").html(data);
    })
})

2.然后我通过以下方式发布表单:

$(Document).on("click", '#headPortraitSubmit', function() {
    var formData = new FormData();
    formData.append("portrait", $('#headPortraitFile').get(0).files[0])
    $.ajax({ 
        url : "/headPortraitSubmit", 
        type : 'POST', 
        data : formData, 
        processData : false, 
        contentType : false,
        beforeSend:function(){
            console.log("正在进行，请稍候");
        },
        success : function(data) { 
            if (data = "success") {
                $(".bodyPart").children().remove();
                $(".bodyPart").load('/coding');
            }
        }, 
    });
})

Answer 1

for属性值应匹配 id的<input type="file">如果预期结果是 change正在召集的事件<input type="file">元素当 <label>单击元素。替代"submit"对于 "button"在type <button> 的属性.

Document是一个函数，而不是 html document 。替代document对于 Document at 参数传递给jQuery() :$() .

if条件在success内应该使用==或===比较 data 的值至"success" ，而不是分配 "success"至data标识符。

$(document).on(/* event, selector, eventHandler */)

$(document).on("click", '#headPortraitSubmit', function() {
    var formData = new FormData();
    formData.append("portrait", $('#headPortraitFile').get(0).files[0]);
    console.log(formData.get("portrait"));
    /*
    $.ajax({ 
        url : "/headPortraitSubmit", 
        type : 'POST', 
        data : formData, 
        processData : false, 
        contentType : false,
        beforeSend:function(){
            console.log("正在进行，请稍候");
        },
        success : function(data) { 
            if (data === "success") {
                $(".bodyPart").children().remove();
                $(".bodyPart").load('/coding');
            }
        }, 
    });
    */
});

document.querySelector("form")
.onsubmit = function(event) {
  event.preventDefault();
}

document.querySelector("input[id=headPortraitFile]")
.onchange = function(event) {
  console.log(this.files[0])
}

input[type=file] {
  display: none;
}

[for=headPortraitFile]:before {
  content: 'Label for #headPortraitFile ';
}

#headPortraitSubmit:before {
  content: 'Sumbit form .form-horizontal ';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data" class="form-horizontal">
  <div class="form-group" style="margin-left:0px;">
    <label for="headPortraitFile">注：选择头像文件尽量小于2M</label>
    <input id="headPortraitFile" type="file" name="portrait">
  </div>
  <button id="headPortraitSubmit" type="submit" class="btn-sm btn-primary">上传头像</button>
</form>