標籤：result ada hang title setattr 資料 index script file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上傳demo</title>
</head>
<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>
<img src="" id="img_data" name="img">
<iframe frameborder="0" name="iframe_data" id="iframe_data"></iframe>
<script>
// 擷取元素
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("圖片類型不對");
return false;
}
// js 專有上傳
var reader = new FileReader();
reader.readAsDataURL(files);
reader.onload = function(e){
// 顯示img
img_data.setAttribute(‘src‘,this.result);
// 在js 上傳成功時 做該form提交功能
form_data.submit();
}
}
iframe_data.addEventListener(‘load‘,function(){
// 擷取iframe 內的資料 最後賦值給某個隱藏欄位
var text = iframe_data.contentWindow.document.body.innerHTML;
console.log(text);
});
}
</script>
</body>
</html>
JS 專有上傳圖片
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
