Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .submit {
- -moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
- -webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
- box-shadow:inset 0px 1px 0px 0px #cae3fc;
- background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
- background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
- background-color:#79bbff;
- -moz-border-radius:6px;
- -webkit-border-radius:6px;
- border-radius:6px;
- border:1px solid #469df5;
- display:inline-block;
- color:#ffffff;
- font-family:arial;
- font-size:14px;
- font-weight:bold;
- padding:5px 14px;
- text-decoration:none;
- text-shadow:1px 1px 0px #287ace;
- cursor:pointer;
- }
- .submit:hover {
- background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) );
- background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
- background-color:#4197ee;
- }
- .submit:active {
- position:relative;
- top:1px;
- }
- .text-input {
- padding: 6px;
- font-size: 13px;
- border: 1px solid #d5d5d5;
- color: #333;
- border-radius: 4px 4px 4px 4px !important;
- }
- <form>
- <input type="text" class="text-input" size="40"/>
- <input type="button" value="Upload" id="upload" class="submit"/>
- </form>
- <p class="form">
- <input type="text" id="path" />
- <label class="add-photo-btn">upload
- <span>
- <input type="file" id="myfile" name="myfile" />
- </span>
- </label>
- </p>
- .form input[type="file"]{
- z-index: 999;
- line-height: 0;
- font-size: 50px;
- position: absolute;
- opacity: 0;
- filter: alpha(opacity = 0);-ms-filter: "alpha(opacity=0)";
- cursor: pointer;
- _cursor: hand;
- margin: 0;
- padding:0;
- left:0;
- }
- .add-photo-btn{
- position:relative;
- overflow:hidden;
- cursor:pointer;
- text-align:center;
- background-color:#83b81a;
- color:#fff;
- display:block;
- width:197px;
- height:31px;
- font-size:18px;
- line-height:30px;
- float:left;
- }
- input[type="text"]{
- float:left;
- }
- $('#myfile').change(function(){
- $('#path').val($(this).val());
- });
- <img id="image" style="cursor:pointer;" src="img.jpg" />
- <input type='file' style="display:none;" name="photosubmit" id="photosubmit"/>
- $("#image").click(function(){
- $("#photosubmit").click();
- });
- #FileUpload {
- position:relative;
- }
- #BrowserVisible {
- position: absolute;
- top: 0px;
- left: 0px;
- z-index: 1;
- background:url(upload.png) 100% 1px no-repeat;
- width:345px;
- height:30px;
- }
- #FileField {
- width:250px;
- margin-right:85px;
- padding: 6px;
- font-size: 13px;
- background: #fff url('bg-form-field.gif') top left repeat-x;
- border: 1px solid #d5d5d5;
- color: #333;
- border-radius: 4px 4px 4px 4px !important;
- }
- #BrowserHidden {
- position:relative;
- width:345px;
- height:30px;
- text-align: right;
- -moz-opacity:0;
- filter:alpha(opacity: 0);
- opacity: 0;
- z-index: 2;
- }
- <div id="FileUpload">
- <input type="file" size="24" id="BrowserHidden" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
- <div id="BrowserVisible"><input type="text" id="FileField" /></div>
- $(document).ready(function(){
- // replace all file upload elements for styling purposes
- $('input[type="file"]').each(function(){
- var btn = $('<button class="file">Browse...</button>');
- var txt = $('<span class="file"></span>');
- $(this).after(txt).after(btn);
- $(this).css({display:'none'});
- var target = this;
- $(btn).click(function(ev){
- ev.preventDefault();
- $(target).click();
- })
- $(target).change(function(){
- // IE uses a stupid renaming scheme that includes "fake-path"
- var fname = $(target).val()
- $(txt).html(fname.substr(fname.lastIndexOf('\')+1));
- });
- });
- });
- <button>upload</button>
- <input type="text" id="f" disabled="disabled" />
- <input id="html_btn" type='file' " /><br>
- button {
- border-radius:10px;
- padding:5px;
- }
- #html_btn {
- display:none;
- }
- $('button').bind("click", function () {
- $('#html_btn').click();
- });
- $('#html_btn').change(function () {
- document.getElementById("f").value = $('#html_btn').val();
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement