1
0

Add button to allow selecting files in browser

This commit is contained in:
Doug Patti 2011-12-30 17:15:26 -05:00
parent c28353a3b6
commit 64a03ec177
3 changed files with 51 additions and 5 deletions

View File

@ -1,3 +1,7 @@
<div id="dropbox">
<span class="message">Drop images here to upload.</span>
</div>
<span class="message">Drop images here to upload or click below to select.</span>
<div class="button">
Select Images
<input type="file" id="file-input" name="file" multiple>
</div>
</div>

View File

@ -117,6 +117,33 @@ h1{
border-radius: 3px 3px 0 0;
}
#dropbox .button {
background-color: #333;
border-radius: 3px;
color: #ddd;
font-size: 13px;
width: 120px;
height: 28px;
line-height: 28px;
padding: 0 8px;
margin: 1em auto;
overflow: hidden;
position: relative;
text-align: center;
}
#dropbox #file-input {
font-size: 460px;
cursor: pointer;
margin: 0;
padding: 0;
position: absolute;
opacity: 0;
right: 0;
top: 0;
z-index: 10000;
}
/*-------------------------
@ -403,4 +430,4 @@ h1{
.success {
color: green;
}
}

View File

@ -1,6 +1,7 @@
$(function(){
var dropbox = $('#dropbox'),
message = $('.message', dropbox);
message = $('.message', dropbox),
button = $('#file-input');
dropbox.filedrop({
// The name of the $_FILES entry:
@ -114,4 +115,18 @@ $(function(){
message.html(msg);
}
});
// Button upload support
button.change(function(){
var fileList = this.files;
if (fileList.length > 0) {
// Send this as if it were dropped
var e = $.Event("drop", {
dataTransfer: {
files: fileList,
},
});
dropbox.trigger(e);
}
});
});