我想显示图像而不是输入类型="文件"

时间:2014-10-31 10:51:28

标签: php jquery html

我编写了以下代码,但现在没有得到文件字段的值

<div class="image-upload" style="position: absolute; margin-top: -39px; margin-left: 376px;">
    <label for="file-input">
       <img width="50%" height="50%" src="images/camera-icon.png">
    </label>
   <input type="file" id="prod_pic" name="imgfile" style="display:none;">
</div>

1 个答案:

答案 0 :(得分:1)

我创建了一个自定义文件输入,这里是代码:

<span class="customInputFile">
    <div id="fileUpdate">
        <div id="fileUpdate-left">
            Anexe o seu currículo
        </div>
        <div id="fileName"></div>
    </div>
    <input type="file">
</span>


$('#fileUpdate').on("click", function() {
    $(this).next('input[type="file"]').click();
    $(this).next('input[type="file"]').change( function(){
        fileName = $(this).val().replace(/C:\\fakepath\\/i, '')
        $('#fileName').text(fileName).animate({
            marginTop: '13px'
        });
    });
});


.customInputFile{
    display: block;
    margin: 0 0 10px 0;
    cursor: pointer;
}
.customInputFile input[type="file"] {
    display: none;
}
.customInputFile #fileUpdate {
    background: rgb(114,191,68);
    display: block;
    padding: 25px 0; 
    color: rgb(255,255,255);
    text-align: center;
    overflow: auto;
}
.customInputFile #fileUpdate #fileUpdate-left{
    display: inline-block;
    width: 190px;
    font-size: 20px;
    line-height: 23px;
    font-family: 'museo_sans500';
    text-transform: uppercase;
    text-align: left;
}

这是一个小提琴:http://jsfiddle.net/srp3827v/

以我的代码为例,按照自己的方式设计风格......