Gravity表单、jQuery ajaxError()和样式化文件输入:在发生错误后保留文件值
我正在使用重力表单wordpress插件上传一个文件。表单提交和错误处理工作正常。然而,我已经对表单做了一些修改,以便为文件输入添加样式,只添加了一些HTML、CSS、+jQuery。下面的CSS放置了一个样式化的按钮,字段看起来像一个字段,但实际上只是一个div,包含在.upload fake中,位于与输入相同的水平+垂直空间中,但输入的不透明度设置为0,因此您只能看到该按钮。输入的z索引将其置于.upload false之上,因此当单击按钮或字段时,它会触发上载按钮 这里是一个小屏幕截图的设置 相关HTML+CSS输入_1_3为文件输入:Gravity表单、jQuery ajaxError()和样式化文件输入:在发生错误后保留文件值,jquery,ajax,forms,wordpress,submit,Jquery,Ajax,Forms,Wordpress,Submit,我正在使用重力表单wordpress插件上传一个文件。表单提交和错误处理工作正常。然而,我已经对表单做了一些修改,以便为文件输入添加样式,只添加了一些HTML、CSS、+jQuery。下面的CSS放置了一个样式化的按钮,字段看起来像一个字段,但实际上只是一个div,包含在.upload fake中,位于与输入相同的水平+垂直空间中,但输入的不透明度设置为0,因此您只能看到该按钮。输入的z索引将其置于.upload false之上,因此当单击按钮或字段时,它会触发上载按钮 这里是一个小屏幕截图的设
<div class="upload-fake">
<a class="button green yanone">Choose File</a>
<div class="file-status">File</div>
</div>
#input_1_3 {
width: 100%;
height: 30px;
position: relative;
z-index: 2;
opacity: 0 !important;
filter: alpha(opacity=0) !important;
-ms-filter: "alpha(opacity=0)" !important;
-khtml-opacity: 0 !important;
-moz-opacity: 0 !important
}
.upload-fake {
position: relative;
z-index: 1;
margin-top: -30px;
clear: both
}
Gravity forms会将我的HTML重新加载到其原始状态,而不包括上面jQuery脚本中修改的文本,因此.upload fake.file status中的文本会重置回文件,即使在提交之前已选择并写入该字段
我想要一种方法来完成以下工作:
提交前将文件输入值存储在变量中
如果出现错误,请将文件输入的值重置为提交前设置的变量
我尝试过使用$.ajaxErrorfunction{…},但是当表单产生错误时,它似乎没有被触发
有没有人有过这方面的经验或想法
$('input[type=file]').live("change", function(e){
var AllowedExtension = ['jpeg', 'jpg'],
$me = $(this),
$file = $('.file-status');
value = $me.val(),
shortvalue = value.split("\\").pop(),
allowed = value.split('.').pop().toLowerCase();
$file.removeClass('error');
if ($.inArray(allowed, AllowedExtension) == -1) {
$file.text('only JPG or JPEG allowed').addClass('error');
} else {
if(shortvalue.length >= 30) {shortvalue = shortvalue.substr(0,27) + '...';}
$file.text(shortvalue);
}
});