The page got through Ajax cannot use the input type = "file" label?

Question

I get form page through Ajax. The following is a form of code:

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>

But the form of the input type = "file" in the browser cannot selected file directly, not to mention the submitted documents. I do not know what reason be? This two days have not been solved, for a great god!!!!!!

here is the Ajax code: 1.I get the form page by this:

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

2.and then I post the form by this:

$(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');
            }
        }, 
    });
})

Possible duplicate of [jQuery Ajax File Upload](http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) — Emilio Venegas, Apr 29 '17 at 05:09
You can transfer a file through AJAX with XHR2, but it's not supported by old borwsers (mainly IE < 10, so surprising). However, you can use an IFRAME. Take a look at [this answer](https://stackoverflow.com/a/2320097/6424295) — Emilio Venegas, Apr 29 '17 at 05:10
@Emilio Venegas Thankyou at first ! I Have been refer to the answer before asking this question . I think they are different~ — Capricorn, Apr 29 '17 at 05:46
The question is I can't input file at the form page. But I think the Ajax code is not the reason. — Capricorn, Apr 29 '17 at 05:56
Why do you set contentType to false? Do you not want "multipart/form-data"? — John Hascall, Apr 29 '17 at 06:56

guest271314 · Accepted Answer · 2017-04-29T05:57:50.317

for attribute value should match id of <input type="file"> if expected result is for change event to be called for <input type="file"> element when <label> element is clicked. Substitute "submit" for "button" at type attribute of <button>.

Document is a function, not html document. Substitute document for Document at parameter passed to jQuery() : $().

if condition within success should use == or === to compare value of data to "success", instead of assigning "success" to data identifier.

$(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>

The page got through Ajax cannot use the input type = "file" label?

1 Answers1