js图片上传 的方法
先规划出框架
<div id="AQA" style="width:300px; height:200px; background-color:aquamarine; text-align:center;margin-left:300px; line-height:200px;" onclick="UpLode()"> // 设置一个ID 为AQA 调节一下框架的大小 在设置一个onclick点击事件
<span><i class="glyphicon glyphicon-open"></i>上传图片</span>
</div>
在添加一个隐藏的Input
<input id="fil" onchange="GetFile()" type="file" style="display:none"/> // 给Input设定一个ID 在添加一个onchang触发的事件 display:none为隐藏 将Input隐藏起来
然后再写JS方法
格式为；
<script type="text/javascript">
function UpLode() {
//触发Fil的 点击事件
$("#fil").trigger("click");
}
//图片上传后onchang触发的事件
function GetFile() {
debugger;
//2 取上传后图片的值
//event.target.files[0] 获取指定上传控件内的第一个文件
var a = event.target.files[0];
//取文件的路径 注意 浏览器的保密协议
var url = window.URL.createObjectURL(a);
//上传图片后让图片显示到上传框
$("#AQA").css(\'background\', \'url(\' + url + \')0% 0% / cover\')
}
上传图片之前样式为；
上传之后样式为
