input[type=file]获取上传⽂件路径案例最近在项⽬时，需要获取⽤户的上传⽂件的路径，便写了⼀个demo：
<body>
<input type="file" name="" value="">
<script>
var input = ElementsByTagName("input")[0];
console.log(input);
var that = this;
console.log(that.files[0]);
var src = ateObjectURL(that.files[0])
html获取input输入的数据console.log(src);
var img = ateElement("img");
img.style.width = "200px";
img.src = src;
document.body.appendChild(img);
}
</script>
效果及结果如下：
通过input[type=file]上传图⽚获取图⽚的尺⼨：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form id="form">
<!-- 1.给input标签添加⼀个onchange事件：⼀旦选择⽂件发⽣变化则会触发⽬的：获取选择图⽚的原始数据 -->
<input type="file" id="exampleInputFile" name="icon" onchange=uploadImg(this)>
<!-- 2.⽤⼀个img标签来接收⽂件数据⽬的：（1）先接收⽂件数据（2）通过offsetHeight属性获取宽⾼ -->
<img src="" alt="" id="11111">
<p>请上传图⽚.</p>
</form>
</body>
<script>
//选择图⽚，马上预览
function uploadImg(obj) {
//1.读取⽂件详细信息
var file = obj.files[0];
console.log(obj);
console.log(file);
/
/2.使⽤FileReader读取⽂件信息
var reader = new FileReader();
//4.监听读取⽂件过程⽅法，异步过程
console.log("开始读取....");
}
console.log("正在读取中....");
}
console.log("中断读取....");
}
console.log("读取异常....");
}
console.log("成功读取....");
console.ault);
//或者 img.src = sult;  //e.target == this
var img = ElementById("11111");
//将解析的base64字符串赋值给img标签
img.src = sult;
/
/5.这⾥需要异步获取，避免线程延迟
setTimeout(function(){
window.alert('⾼度' + img.offsetHeight + '宽度' + img.offsetWidth);            },1000);
}
//3.开始读取
}
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。