SHARE
TWEET

Untitled

a guest Jul 16th, 2019 59 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .submit {
  2.       -moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
  3.       -webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
  4.       box-shadow:inset 0px 1px 0px 0px #cae3fc;
  5.       background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
  6.       background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
  7.       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
  8.       background-color:#79bbff;
  9.      -moz-border-radius:6px;
  10.      -webkit-border-radius:6px;
  11.      border-radius:6px;
  12.      border:1px solid #469df5;
  13.      display:inline-block;
  14.      color:#ffffff;
  15.      font-family:arial;
  16.      font-size:14px;
  17.      font-weight:bold;
  18.      padding:5px 14px;
  19.      text-decoration:none;
  20.      text-shadow:1px 1px 0px #287ace;
  21.     cursor:pointer;
  22. }
  23. .submit:hover {
  24.      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) );
  25.      background:-moz-linear-gradient( center top, #4197ee 5%, #79bbff 100% );
  26.      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4197ee', endColorstr='#79bbff');
  27.      background-color:#4197ee;
  28. }
  29.  .submit:active {
  30.    position:relative;
  31.    top:1px;
  32. }
  33.  
  34.  .text-input {
  35.     padding: 6px;
  36.     font-size: 13px;
  37.     border: 1px solid #d5d5d5;
  38.     color: #333;
  39.     border-radius: 4px 4px 4px 4px !important;
  40.  }
  41.  
  42. <form>
  43.     <input type="text" class="text-input" size="40"/>
  44.     <input type="button" value="Upload" id="upload" class="submit"/>
  45. </form>
  46.      
  47. <p class="form">
  48.   <input type="text" id="path" />
  49.   <label class="add-photo-btn">upload
  50.     <span>
  51.        <input type="file" id="myfile" name="myfile" />
  52.     </span>
  53.   </label>
  54. </p>
  55.      
  56. .form input[type="file"]{
  57.   z-index: 999;
  58.   line-height: 0;
  59.   font-size: 50px;
  60.   position: absolute;
  61.   opacity: 0;
  62.   filter: alpha(opacity = 0);-ms-filter: "alpha(opacity=0)";
  63.   cursor: pointer;
  64.   _cursor: hand;
  65.   margin: 0;
  66.   padding:0;
  67.   left:0;
  68.   }
  69.  .add-photo-btn{
  70.    position:relative;
  71.    overflow:hidden;
  72.    cursor:pointer;
  73.    text-align:center;
  74.    background-color:#83b81a;
  75.    color:#fff;
  76.    display:block;
  77.    width:197px;
  78.    height:31px;
  79.    font-size:18px;
  80.    line-height:30px;
  81.    float:left;
  82.  }
  83.  input[type="text"]{
  84.    float:left;
  85.  }
  86.      
  87. $('#myfile').change(function(){
  88.   $('#path').val($(this).val());
  89. });
  90.      
  91. <img id="image" style="cursor:pointer;" src="img.jpg" />
  92. <input type='file' style="display:none;" name="photosubmit" id="photosubmit"/>
  93.      
  94. $("#image").click(function(){
  95.  $("#photosubmit").click();
  96. });
  97.      
  98. #FileUpload {
  99.     position:relative;
  100. }
  101.  
  102. #BrowserVisible {
  103.     position: absolute;
  104.     top: 0px;
  105.     left: 0px;
  106.     z-index: 1;
  107.     background:url(upload.png) 100% 1px no-repeat;
  108.     width:345px;
  109.     height:30px;
  110. }
  111.  
  112. #FileField {
  113.     width:250px;
  114.     margin-right:85px;
  115.     padding: 6px;
  116.     font-size: 13px;
  117.     background: #fff url('bg-form-field.gif') top left repeat-x;
  118.     border: 1px solid #d5d5d5;
  119.     color: #333;
  120.     border-radius: 4px 4px 4px 4px !important;
  121. }
  122.  
  123. #BrowserHidden {
  124.     position:relative;
  125.     width:345px;
  126.     height:30px;
  127.     text-align: right;
  128.     -moz-opacity:0;
  129.     filter:alpha(opacity: 0);
  130.     opacity: 0;
  131.     z-index: 2;
  132. }
  133.  
  134. <div id="FileUpload">
  135. <input type="file" size="24" id="BrowserHidden" onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" />
  136. <div id="BrowserVisible"><input type="text" id="FileField" /></div>
  137.      
  138. $(document).ready(function(){
  139.  
  140.   // replace all file upload elements for styling purposes
  141.   $('input[type="file"]').each(function(){
  142.     var btn = $('<button class="file">Browse...</button>');
  143.     var txt = $('<span class="file"></span>');
  144.     $(this).after(txt).after(btn);
  145.     $(this).css({display:'none'});
  146.     var target = this;
  147.     $(btn).click(function(ev){
  148.       ev.preventDefault();
  149.       $(target).click();
  150.     })
  151.     $(target).change(function(){
  152.       // IE uses a stupid renaming scheme that includes "fake-path"
  153.       var fname = $(target).val()
  154.       $(txt).html(fname.substr(fname.lastIndexOf('\')+1));
  155.     });
  156.   });
  157. });
  158.      
  159. <button>upload</button>
  160. <input type="text" id="f" disabled="disabled" />
  161. <input id="html_btn" type='file' " /><br>
  162.      
  163. button {
  164.     border-radius:10px;
  165.     padding:5px;
  166. }
  167. #html_btn {
  168.     display:none;
  169. }
  170.      
  171. $('button').bind("click", function () {
  172.     $('#html_btn').click();
  173.  
  174. });
  175. $('#html_btn').change(function () {
  176.     document.getElementById("f").value = $('#html_btn').val();
  177. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top