• 图片上传效果


    css部分 
    #file
    { margin: auto; width: 100px; height: 100px; border-radius: 25px; outline: 30px solid blue; outline-offset: -80px; border: 5px solid red; } #file [type="file"] { width: 100%; height: 100%; opacity: 0; cursor: pointer; } #wrap img{ width: 100px; height: 100px; }
    HTML部分
    <
    form action="10.php"> <div id="file"> <!--多选--> <input type="file" multiple title="请选择文件" onchange="upLoadFile(this);"> </div> <div id="wrap"></div> </form>
    js部分 
    function upLoadFile(a) { for (var i=0; i<a.files.length;i++){ //构建一个文件预览对象 var file=new FileReader(); //加载完之后 file.onload=function (ev) { //创建图片元素 var img=document.createElement('img'); //设置图片路径 img.src=ev.target.result; var oWrap=document.getElementById('wrap'); //给oWrap中插入图片 oWrap.appendChild(img); img.onclick=function () { var con=confirm('是否删除'); if (con){ this.parentNode.removeChild(this) } } }; //解析文件路径 file.readAsDataURL(a.files[i]); } }
  • 相关阅读:
    Leaf-spine data center architectures
    centreon 画图x轴乱码
    二分图匹配
    牛客练习赛17
    HDU-4550-贪心
    HDU-4511-ac自动机+dp
    UVA-11761-马尔可夫/记忆化搜索
    HDU-3853-期望/dp/坑
    HDU-4405-期望dp
    zoj-3329-期望/dp/方程优化
  • 原文地址:https://www.cnblogs.com/punisher999/p/12078553.html
Copyright © 2020-2023  润新知