Advertisement
Guest User

Untitled

a guest
Jul 16th, 2019
79
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.42 KB | None | 0 0
  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. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement