Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Upload demo</title>
<body>
<form action= "{: U (' Index/demo ')}" method= "Post" enctype= "Multipart/form-data" id= "Form_data" name= "Form_data" target= "Iframe_data" >
<input type= "File" name= "file" id= "file" >
</form>
<iframe frameborder= "0" name= "iframe_data" id= "Iframe_data" ></iframe>
<script>
Get element
var file = document.getElementById (' file ');
var img_data = document.getElementById (' Img_data ');
var form_data = document.getElementById (' Form_data ');
var iframe_data = document.getElementById (' Iframe_data ');
Window.onload = function () {
File.onchange = function () {
var files = file.files[0];
var txt =/^image\/\w+$/;
if (! ( Txt.test (Files.type))) {
Alert ("Incorrect picture type");
return false;
}
JS Proprietary upload
var reader = new FileReader ();
Reader.readasdataurl (files);
Reader.onload = function (e) {
Show img
Img_data.setattribute (' src ', this.result);
Do the form submission function when JS upload is successful
Form_data.submit ();
}
}
Iframe_data.addeventlistener (' Load ', function () {
Gets the data in the IFRAME last assigned to a hidden field
var text = Iframe_data.contentWindow.document.body.innerHTML;
Console.log (text);
});
}
</script>
</body>
JS Proprietary upload Image
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
