前端模拟 图片上传---->>通过选取的图片获取其路径<<------
2024-10-20 01:38:59
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div { position: relative;
overflow: hidden;
background: #EEE;
width: %;
height: 667px;
} #bg, #mask-bg {
position: absolute;
width: %;
height: 667px;
background-size: cover;
}
#mask-bg{
top:9px;
mask-image: url(mask.png);
-webkit-mask-image: url(mask.png);
}
input {
height: 60px;
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<p id="bg"></p>
<p id="mask-bg"></p>
</div>
<input type="file"> <script>
var input = document.querySelector('input'),
bg = document.querySelector('#bg'),
maskBg = document.querySelector('#mask-bg'); input.onchange = function () {
var src = getObjectURL(this.files[]);
setBg(src); }; function setBg(src){
bg.style.backgroundImage = 'url(' + src + ')';
maskBg.style.backgroundImage = 'url(' + src + ')';
} /**
* 通过选择的文件获取其图片路径（blob）
* @param file
* @returns {*}
*/
function getObjectURL(file) {
var url = null;
console.log(window.createObjectURL)
console.log(window.URL)
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
} </script>
</body>
最新文章
- 2015年ACM沈阳网络赛（准备做掉4道：）
- Gbase配置
- 16个时髦的扁平化设计的 HTML5 & CSS3 网站模板
- POJ 1088
- MySQL导入sql脚本 导出数据库
- 用Unity开发HTC VIVE——手柄控制篇
- 配置SQL Server 2005 远程连接（转）
- Jmeter3.0新特性
- Coursera 机器学习笔记（四）
- PHP是干什么用？
- MFC程序设计小结
- javascript 变量的引入、变量的声明、变量的初始化
- python程序—利用socket监控端口
- vmware workstations下安装CentOS7
- HTML学习二_HTML常用的行级标签，常用实体字符及表单标签
- 开源ETL工具之Kettle介绍
- MySQL执行计划解析
- beego 初体验 - orm
- python json 访问与字符串截取
- Java解析Excel之应用Reflection等技术实现动态读取