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‘)
}

上传图片之前样式为；

上传之后样式为

js图片上传 的方法

原文：https://www.cnblogs.com/yutang-wangweisong/p/11603030.html