zoukankan      html  css  js  c++  java
  • html上传文件和图片

    上传文件:<input type="file" id="file" />

    上传文件优化样式

    Html

    <p class="liuyanfile">

    <label>上传文件</label>

    <a href="#" class="file">选择文件<input type="file" id="file" /></a>

    <span>未选择任何文件</span>

    </p>

    Css

    .file {

        position: relative;

        display: inline-block;

        overflow: hidden;

        text-indent: 0;

        line-height: 35px;

    text-align: center;

    101px;

    height: 35px;

    background-image:

    linear-gradient(0deg, #e4e4e4 0%, #e6e6e6 39%, #f2f2f2 100%, #797979 100%, #000000 100%),

    linear-gradient(#dddddd, #dddddd);

    background-blend-mode: normal,normal;

    border-radius: 2px;

    border: solid 1px #cccccc;

    vertical-align: middle;

    margin-left: 45px;

    }

    .file:hover{

    color: #010101;

    }

    .addliuyan .liuyanfile span{

    color: #666666;

    margin-left: 20px;

    }

    .file input {

        position: absolute;

        font-size: 100px;

        right: 0;

        top: 0;

        opacity: 0;

    }

    上传图片优化样式

    Html:

    <div class="sh userpic">

    <div class="img left">

    <img src="img/fixed/userpic.jpg" >

    </div>

    <a class="left" href="javascript:;">编辑头像

    <input type="file" name="" id="picfile" value="" />

    </a>

    </div>

    Js

    // 上传图片

    $("#picfile").change(function(){

    var filePath = $(this).val();

    let fr = new FileReader(); //创建new FileReader()对象

    let imgObj = this.files[0];//获取图片

    fr.readAsDataURL(imgObj);//将图片读取为DataURL

    if(filePath.indexOf("jpg") != -1 || filePath.indexOf("JPG") != -1 || filePath.indexOf("PNG") != -1 || filePath.indexOf("png") != -1){

    fr.onload = function() {

    $(".setselfmsg .userpic img").attr("src",this.result);

    }

    } else {

    confirm("您未上传文件,或者您上传文件类型有误!");

    return false;

    }

    })

    Css:

    .setselfmsg .userpic a{

    display: block;

    overflow: hidden;

    position: relative;

    }

    .setselfmsg #picfile{

    position: absolute;

    left: 0;

    top:0;

    opacity: 0;

    font-size: 100px;

    }

  • 相关阅读:
    爬取校园新闻首页的新闻
    网络爬虫基础练习
    综合练习:词频统计
    Hadoop综合大作业
    理解MapReduce
    熟悉常用的HBase操作
    熟悉常用的HDFS操作
    爬虫大作业
    数据结构化与保存
    使用正则表达式,取得点击次数,函数抽离
  • 原文地址:https://www.cnblogs.com/xuwenqin/p/14133989.html
Copyright © 2011-2022 走看看