Javascript 拖放文件，但不要'；自动上传

希望在点击提交按钮后拖放并上传文件。 我知道这可以通过以下方式实现：

<input type="file" multiple />

JS与Jquery

$("input#files").change(function() {
    var ele = document.getElementById($(this).attr('id'));
    var result = ele.files;
    for(var x = 0;x< result.length;x++){
        var fle = result[x];
        $("#output ul").append("<li>" + fle.name + "(TYPE: " + fle.type + ", SIZE: " + fle.size + ")</li>");        
    }

});

$（“输入文件”）.change（函数（）{
var ele=document.getElementById（$（this.attr（'id'））；
var result=ele.files；
for（var x=0；x”+fle.name+”（类型：“+fle.TYPE+”，大小：“+fle.SIZE+”）”；
}
});

提前感谢。

我找到了解决方案，请参阅：

CSS采用于：

脚本采用于：

HTML:

<center>
<span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Drag and Drop files...</span>
    <input type="file" name="ufile[]" id="ufile" multiple>
</span>
</center>    

<div id="output"><ul></ul></div>

JS:

$（“输入#ufile”）.change（函数（）{
$（“#输出ul”）.empty（）；
var ele=document.getElementById（$（this.attr（'id'））；
var result=ele.files；
for（var x=0；x”+fle.name+”（类型：“+fle.TYPE+”，大小：“+fle.SIZE+”）”；
}
});

---

希望这对其他人有所帮助

Hi，你想在你的html中添加样式吗？Hi@Harry tnx的回复，不管怎样都是否定的，我需要拖放功能才能工作。请参见感谢如果要设置文件输入的样式，请将其隐藏，并在标签内放置一个常规按钮，该标签的for attrib指向隐藏的输入。@dandavis现在仍然处于状态，这是唯一的方法：（无论如何，在您的示例中，它不可能一个接一个地删除。最后一个按钮覆盖之前的一个，预览图像丢失。）

$("input#files").change(function() {
    var ele = document.getElementById($(this).attr('id'));
    var result = ele.files;
    for(var x = 0;x< result.length;x++){
        var fle = result[x];
        $("#output ul").append("<li>" + fle.name + "(TYPE: " + fle.type + ", SIZE: " + fle.size + ")</li>");        
    }

});

<center>
<span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Drag and Drop files...</span>
    <input type="file" name="ufile[]" id="ufile" multiple>
</span>
</center>    

<div id="output"><ul></ul></div>

.btn, .fileupload-buttonbar .toggle {
margin-bottom: 5px;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
/*color: #fff;
background-color: #47a447;
border-color: #398439;*/
}
.btn:hover, .btn:focus {
color: #333;
text-decoration: none;
}
.fileinput-button {
position: relative;
overflow: hidden;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-plus:before {
content: "\2b";
}
.btn-success {
color: #fff;
/*background-color: #5cb85c;
border-color: #4cae4c;*/
font-weight: bold;
text-align: center;
padding: 1em 15em;
margin: 10px 0px 0px 0px;
color: #555;
border: 2px dashed #555;
border-radius: 7px;
margin-bottom: 20px;
}

.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 200px;
direction: ltr;
cursor: pointer;
}
input[type=file] {
display: block;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0;
}
input[type="file"] {
align-items: baseline;
color: inherit;
text-align: start;
}
input[type="hidden"], input[type="image"], input[type="file"] {
-webkit-appearance: initial;
padding: initial;
background-color: initial;
border: initial;
}
input[type="password"], input[type="search"] {
-webkit-appearance: textfield;
padding: 1px;
background-color: white;
border: 2px inset;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
}
input, textarea, keygen, select, button {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}
user agent stylesheetinput, textarea, keygen, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb;
}

$("input#ufile").change(function() {
    $("#output ul").empty();
        var ele = document.getElementById($(this).attr('id'));
        var result = ele.files;
        for(var x = 0;x< result.length;x++){
        var fle = result[x];
        $("#output ul").append("<li>" + fle.name + "(TYPE: " + fle.type + ", SIZE: " + fle.size + ")</li>");        
    }

});