javascript - 拖放文件但不自动上传

Question

希望在单击提交按钮时拖放并上传文件。我知道这可以使用:

<input type="file" multiple />

但想添加样式。到目前为止我得到的是这个 http://jsfiddle.net/raymonn23/Vk38P/1/

HTML

<div>
    <input type="file" name="files" id="files" multiple /> 
    <br /><br />
    <div id="fileDrop">
        Drag or Drop your files here
    </div>
</div>    
<div id="output"><ul></ul></div>
<input type="submit" value="Upload files onClick me">

CSS

#fileDrop{
    border-style: dotted;
    border-width: 1px;
    padding: 20px;
    text-align: center;
}

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>");        
    }

});

提前致谢。

Answer 1

我做的解决方案，参见:http://jsfiddle.net/raymonn23/Vk38P/2/

CSS 采用: http://blueimp.github.io/jQuery-File-Upload/

脚本采用: http://jsfiddle.net/TNCodeMonkey/BaGQt/

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>

CSS:

.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;
}

JS:

$("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>");        
    }

});

希望这对其他人有帮助