JS 专有上传图片
Posted 迷失在路上
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 专有上传图片相关的知识，希望对你有一定的参考价值。
<!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 专有上传图片的主要内容，如果未能解决你的问题，请参考以下文章