Add external script in head tag.
First for vue, and second for axios ajax.
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
</head>
In body, add div tag with id="myApp" for virtual DOM Vue
<div id="myApp" >
<!-- v-on:submit.prevent -->
<form method="post" action="process.php" @submit="submit" ref="formHTML" >
Firstname: <input type="text" name="firstname" v-model="form.firstname" />
<br />
Lastname: <input type="text" name="lastname" v-model="form.lastname" />
<br />
Description: <textarea name="description" v-model="form.description" rows="10" cols="50" ></textarea>
<br />
File Upload: <input type="file" name="upload" v-model="form.upload" /><br />
Preview: <img src="#" />
<br />
<hr />
<input type="submit" value="Submit" />
</form>
Script Vue
<script>
let vm = new Vue({
el: "#myApp",
data: {
form: {},
result: {}
},
methods: {
submit: async function (event) {
event.preventDefault();
var formHTML = event.target; // this.$refs.formHTML
console.log( formHTML ); // formHTML element
// https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
var formData = new FormData( formHTML );
console.log( formData );
// https://github.com/axios/axios
/* AJAX request */
this.ajax( formHTML, formData ); // ajax( form, data, destination = null )
},
ajax: async function ( form, data, destination = null ) {
await axios( {
method: form.method,
url: form.action,
data: data,
config: {
headers: { "Content-Type": "multipart/form-data" }
}
} )
/* handle success */
.then( result => {
this.result = result.data;
console.log(result);
console.log(result.data);
} )
/* handle error */
.catch( error => {
console.error(error)
} );
}
}
});
</script>
add onchange event in input with file type, then display it with img tag
<script>
/* preview image */
document.querySelector( "input[type='file']" ).addEventListener( "change", function () {
var preview = document.querySelector( "img" );
var file = document.querySelector( "input[type='file']" ).files[0];
var reader = new FileReader();
reader.addEventListener( "load", function () {
preview.height = 100;
preview.title = file.name;
preview.src = reader.result;
}, false );
if (file)
{
reader.readAsDataURL(file);
}
console.log( reader );
} );
</script>
process.php
$data = array(
"post" => $_POST,
"files" => $_FILES
);
var_dump($data);
Demo repl.it
Top comments (0)