html css 拖放文件上传样式答案

【问题标题】：Html css drag and dop file uploading stylehtml css 拖放文件上传样式
【发布时间】：2017-11-09 14:23:28
【问题描述】：

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

上拖动图片时

请看截图：

这是我的全部代码。 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);
});

【问题讨论】：

使用 display none 隐藏您的输入并在标签上添加您的所有样式。
嗨，@RajanBenipuri 我已经像你说的那样尝试过。但是，拖放是行不通的。
您将不得不使用一些 js 进行拖放工作
哦。我对此一无所知。可以请建议我有关此代码吗？并把 JS 代码发给我。
我希望我可以，但我真的很抱歉我现在在我的手机上使用 SO，在手机上编写代码非常痛苦。希望别人能给你想要的答案，如果没有，我明天一定会帮助你

标签： jquery html css forms file

【解决方案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>

【讨论】：

太棒了。但是，我还需要拖放系统。上传的图片应该显示在文件上传器下。