when I clicked on the avatar with the input form, I chose the local picture, but the img was not changed, and when I submitted with the form, there was no img data on this side of the form
this is the page of the whole form
I thought about it, it should be processed once when the picture is submitted, and then processed again when all the information is submitted
<form action="http://localhost:5000/settings/profile" id="basic_form" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleInputEmail1"></label>
<p class="form-control-static">email@example.com
</div>
<div class="form-group">
<label for="exampleInputPassword1"></label>
<input name="nickname" type="password" class="form-control" id="exampleInputPassword1" placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1"></label>
<textarea name="bio" class="form-control" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleInputPassword1"></label>
<div>
<label class="radio-inline">
<input name="gender" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
</label>
<label class="radio-inline">
<input name="gender" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
</label>
<label class="radio-inline">
<input name="gender" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
</label>
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1"></label>
<input name="birthday" type="password" class="form-control" id="exampleInputPassword2" placeholder="">
</div>
<button type="submit" class="btn btn-success"></button>
</form>
</div>
<div class="col-md-2 profile-avatar">
<dl>
<dt></dt>
<dd>
<img class="avatar" name="avatar" width="150" height="150" src="../public/img/avatar-max-img.png" alt="">
<div>
<input class="" type="file" value="Submit">
</div>
</dd>
</dl>here is the processing of my ajax
<script>
$("-sharpbasic_form").on("submit", function (e) {
e.preventDefault()
var formData = $(this).serialize()
console.log(formData)
$.ajax({
url: "/settings/profile",
type: "post",
data: formData,
dataType: "json",
success: function (data) {
var err_code = data.err_code
if (err_code === 0) {
// window.alert("")
//
window.location.href = "/"
} else if (err_code === 1) {
window.alert("")
} else if (err_code === 500) {
window.alert("")
}
}
})
})
</script>here is the processing I received and done:
router.post("/settings/profile",function (req, res, next) {
var body = req.body
var file = req.file
console.log(body)
console.log(file)
var form = new formidable.IncomingForm()
//
// form.uploadDir = "./uploads"
form.parse(req, function (err, fields, files) {
console.log("111111111")
console.log(files)
// //
// var ran = parseInt(Math.random()*8999+10000)
// //
// var extname = path.extname(files.avatar)
})
}) I found that here, neither file nor fields can get the data, and only body can get the data, but does not include the image information. Do I need to do a form processing when I submit to img, then submit it through ajax, then render the page once, and then deal with other things, but if the user submits the profile picture and modifies the information, what to do with the information that has been filled in when the profile picture is changed?
here is the page structure
