upload 相关问题

我正在尝试创建自定义上传文件按钮的错觉，因为的 CSS 有限并且很痛苦。我目前正在使用下面的代码：超文本标记语言我正在尝试创建自定义上传文件按钮的错觉，因为 <input type='file'/> 的 CSS 有限并且很痛苦。我目前正在使用下面的代码： HTML <button type="button" class="uploadcontainer"><input type="file" class="docuploadbtn" id="t1url" name="t1url"/>Upload File</button> CSS .docuploadbtn { opacity: 0; } .uploadcontainer { width: 100px; } 此代码的组合显示了一个按钮，其后面的顶部有一个“隐藏”上传按钮，但这将文本“上传文件”推到了下面，从而形成了一个比正常大小的按钮。这是现在的样子：这就是我想要的样子：接下来我可以尝试什么？我找到了创建自定义上传按钮问题的解决方案： HTML <input type="button" class="upbtn" value="Upload File"/> <input type="file" class="docuploadbtn" id="t1url" name="t1url"/> CSS .upbtn { width: 100px; display: inline-block; } .docuploadbtn { visibility: hidden; display: inline-block; } JQuery $('.upbtn').click(function(){ $(this).siblings('.docuploadbtn').click(); }); 这就是我处理 type=file 的方式，它还包括一些 jQuery 增强功能，但你并不真正需要它： if (jQuery) { (function ($) { "use strict"; $('document').ready(function () { $( '.jsFileUpload' ).each( function() { var $input = $( this ), $label = $input.next( 'label' ), labelVal = $label.html(); $input.on( 'change', function( e ) { var fileName = ''; if( this.files && this.files.length > 1 ) fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length ); else if( e.target.value ) fileName = e.target.value.split( '\\' ).pop(); if( fileName ) $label.find( '.jsFileName' ).html( fileName ); else $label.html( labelVal ); }); // Firefox bug fix $input .on( 'focus', function(){ $input.addClass( 'fileupload-has-focus' ); }) .on( 'blur', function(){ $input.removeClass( 'fileupload-has-focus' ); }); }); }); }(jQuery)); } .vis-hide { overflow: hidden; position: absolute; margin: -1px; padding: 0; width: 1px; height: 1px; border: 0; clip: rect(0 0 0 0); } [type="file"] { overflow: hidden; position: absolute; margin: -1px; padding: 0; width: 1px; height: 1px; border: 0; clip: rect(0 0 0 0); } [type="file"] + label { display: inline-block; padding: 0.5em 1em; color: #fff; background-color: #000; cursor: pointer; } [type="file"] + label:hover { color: #fff; background-color: red; } [type="file"].fileupload-has-focus + label, [type="file"]:focus + label { color: #fff; background-color: red; outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px; } [type="file"].fileupload-has-focus + label *, [type="file"]:focus + label * { pointer-events: none; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" id="fileUpload" class="jsFileUpload" data-multiple-caption="{count} files selected" /> <label for="fileUpload"> <span class="jsFileName">Upload file(s)</span> </label>

html css button upload

回答 2 投票 0

如何在 Laravel 中正确使用音频文件类型验证？

我对 Laravel 还很陌生，正在尝试学习这个框架。我目前正在制作一个简单的帖子/排行榜页面，用户应该能够向其中上传音频文件。一切正常...

laravel validation upload vite

回答 1 投票 0

根据购物车总计向 WooCommerce Checkout 添加自定义输入文件字段

我正在尝试向 WooCommerce 结帐页面添加自定义字段，但我希望它仅在订单总数超过一定金额（假设为 500）时才出现。我已经考虑过修改表单。 .

php wordpress woocommerce upload checkout

回答 1 投票 0

WHM 无法更改 WordPress 最大上传大小

我在 WHM 环境中安装了多个 Wordpress。我的 WHM PHP(5.6) 最大上传大小设置为 100MB，PHP 最大 POST 大小设置为 150MB。我还检查了 MultiPHP INI 编辑器，最大上传大小是...