如何使hayageek jQuery Upload File插件支持无图片时提交表单？

我来帮你搞定这个痛点！你遇到的问题是因为当前逻辑完全依赖插件的startUpload()来提交数据，但没有文件时插件不会触发提交动作。咱们只需要调整提交逻辑，让无文件时直接提交原表单，就能实现上传字段可选的效果。

关键修改点： #

1. 修复原代码里的验证器选择器bug（少了#）
2. 增加判断：检查插件中是否有待上传的文件，分两种情况处理提交

修改后的完整JavaScript代码： #

<script type="text/javascript"> //<![CDATA[
jQuery(document).ready(function() {
    var extraObj = jQuery("#warranty-comment-image-upload").uploadFile({
        url: "<?php echo $this->getUrl('warranty/index/savecomment',array('id'=>$params['id'],'key'=>$params['key']));?>",
        fileName: "img",
        showPreview: true,
        dynamicFormData: function() {
            var data = jQuery('#commentForm').serialize();
            return data;
        },
        previewHeight: "128px",
        returnType:'json',
        uploadStr:"<?php echo $this->__('Upload files') ?>",
        previewWidth: "128px",
        allowedTypes: "jpg,jpeg,gif,png,pdf",
        autoSubmit: false,
        showDelete: true,
    });

    jQuery("#warranty-comment-image-upload-button").click(function() {
        // 修复选择器bug：给commentForm加上#
        var formToValidate = $('#commentForm');
        var validator = new Validation(formToValidate);
        
        if(validator.validate()) {
            // 判断是否有待上传的文件
            var fileCount = extraObj.getFilesCount();
            if(fileCount > 0) {
                // 有文件时，用插件上传
                extraObj.startUpload();
            } else {
                // 无文件时，直接提交原表单
                formToValidate.submit();
            }
        }
    });
});
//]]> </script>

代码说明： #

• extraObj.getFilesCount()：这是插件内置的方法，用来获取当前待上传的文件数量
• 当文件数量为0时，直接调用原表单的submit()方法，绕开插件的上传流程，保证表单能正常提交
• 修复了原代码中$('commentForm')的选择器错误，改成$('#commentForm')，确保表单验证能正常工作

表单HTML部分保持不变： #

<form action="<?php echo $this->getUrl('warranty/index/savecomment',array('id'=>$params['id'],'key'=>$params['key']));?>" id="commentForm" method="post" enctype="multipart/form-data">
    <input type="hidden" name="comment_type" value="<?php echo Mage::helper('warranty')->getCommentType();?>">
    <input type="hidden" name="warranty_id" value="<?php echo $this->getRequest()->getParam('id'); ?>">
    <div class="fieldset">
        <h2 class="legend"><?php echo $this->__('Warranty Information') ?></h2>
        <?php $warrantyweek = Mage::getStoreConfig('warrantytext/general/warrantytext',Mage::app()->getStore()->getStoreId());
        $warrantyMessage = Mage::getStoreConfig('warrantytext/general/warrantymessage',Mage::app()->getStore()->getStoreId());
        if($warrantyweek){ ?>
        <div class="warranty-text"><?php echo $warrantyMessage ?></div>
        <?php } ?>
        <?php if($warrantyExtraMessage = Mage::getStoreConfig('warrantytext/general/warrantyextramessage',Mage::app()->getStore()->getStoreId())): ?>
        <div class="warranty-extra-text"><?php echo $warrantyExtraMessage ?></div>
        <?php endif; ?>
        <ul class="form-list">
            <li class="fields">
                <h3 class="tittle"><?php echo $this->__($sectionData['title']) ?></h3>
                <div id="warranty-comment-image-upload" class="extraupload"><?php echo $this->__('Upload Files Here') ?></div>
            </li>
            <li class="wide">
                <label for="comment" class="required"><em>*</em><?php echo $this->__('Comment') ?></label>
                <div class="input-box">
                    <textarea name="comment" id="comment" title="<?php echo $this->__('Comment') ?>" class="required-entry input-text" cols="5" rows="3"></textarea>
                </div>
            </li>
        </ul>
    </div>
    <div class="buttons-set">
        <p class="back-link"><a href="<?php echo $this->escapeUrl($this->getUrl('warranty')) ?>"><small>&laquo; </small><?php echo $this->__('Back') ?></a></p>
        <p class="required"><?php echo $this->__('* Required Fields') ?></p>
        <button id="warranty-comment-image-upload-button" type="button" title="<?php echo $this->__('Submit') ?>" class="button"><span><span><?php echo $this->__('Submit') ?></span></span></button>
    </div>
</form>

这样调整后，不管用户有没有上传图片，只要必填字段（比如评论框）验证通过，表单都能正常提交，完美实现上传字段可选的需求。

内容的提问来源于stack exchange，提问作者MageLerner