jquery - html css拖放文件上传样式

Question

我正在制作一个 html css 和 javascript 拖放文件上传系统。我还设置了文件按钮的样式。但是，左上角显示了一些文件按钮背景。我想删除它。但是，我不能。还有一个问题。当我将图片拖到“云图标”或

checkin JSFIDDLE

请看截图:

这是我的所有代码。 HTML

<form id="form1"> 
 <label for="imgInp" class="custom-file-upload"> 
      <i class="fa fa-cloud-upload"></i>Chosse file</label>
       <input type='file' id="imgInp" /></div>        
</form>
 <img id="blah" src="">  

CSS

input[type='file'] {
    border: 3px dashed #999;
    cursor: move;
    display: block;
    font-size: 0px;
    filter: alpha(opacity=0);
    min-height: 160px;
    min-width: 300px;
    opacity: 1;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
    background: transparent;
    z-index:-99999999999999;
} 
img#blah {
    display: block;
}


.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    position: absolute;
    top: 83px;
    left: 50%;
    z-index: 9999;
    width:75px;
    margin-left:-50.5px;
}

#form1 div {
    position: relative;
    width: 300px;
    float: left;
    height: 170px;
}

input[type='file']:before {
    content: "Upload an Image";
    display: block;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 40px;
    margin: -25px 0 0 -100px;
    font-size: 18px;
    font-weight: bold;
    color: #999;
}

JavaScript

function readURL(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

Answer 1

检查这个我为文件输入制作了 display:none 并使用 jquery 制作了图像点击调用文件输入，并且还更改了文件输入对图像的每个引用，如 input[type =file] 到 input[type=image]

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("input[type='image']").click(function() {
    $("input[id='imgInp']").click();
});
    $("#imgInp").change(function(){
        readURL(this);
    });

input[type='image'] {
    border: 3px dashed #999;
    cursor: move;
    display: block;
    font-size: 0px;
    filter: alpha(opacity=0);
    min-height: 160px;
    min-width: 300px;
    opacity: 1;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
    background: transparent;
    z-index:-99999999999999;
} 
img#blah {
    display: block;
}
       

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    position: absolute;
    top: 83px;
    left: 50%;
    z-index: 9999;
    width:75px;
    margin-left:-50.5px;
}

#form1 div {
    position: relative;
    width: 300px;
    float: left;
    height: 170px;
}

input[type='image']:before {
    content: "Upload an Image";
    display: block;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 40px;
    margin: -25px 0 0 -100px;
    font-size: 18px;
    font-weight: bold;
    color: #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
   <div>
   
 <label for="imgInp" class="custom-file-upload">  <i class="fa fa-cloud-upload"></i>Chosse file</label>
 <input type="image" id="blah">
 <input type='file' id="imgInp" style="display:none;"/></div>  
        
    </form>