提交表单而不上传图片

Question

我正在使用此插件通过 ajax 上传图片 http://hayageek.com/docs/jquery-upload-file.php

但是在这个插件中没有任何选项可以让上传者在表单提交时成为可选的。

这是我的表单代码，我想让上传字段可选。

当前，当我没有向上传器上传任何图片时，它没有提交表单。

    <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() {
         var formToValidate = $('commentForm');
        var validator = new Validation(formToValidate);
        if(validator.validate()) {

            extraObj.startUpload();

        }

    });

});


    //]]>
</script>

表格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>

Answer 1

所以我会在你的第一个条件语句中添加一个额外的检查，检查表单是否有效以及 extraObj 是否不为空（这可能会因变量 returns 而改变，但你应该能够以 null 为目标，如果是二进制文件的长度，或者如果变量 returns 文件大小，甚至是文件的大小）。希望这可以帮助。

if(validator.validate() && extraObj != null) {

 extraObj.startupload();

} else {

 validator.validate();

}

Answer 2

你可以这样使用来防止在没有任何图片上传时调用上传器。

    jQuery("#warranty-comment-image-upload-button").click(function() {
         var formToValidate = $('commentForm');
         console.log(extraObj);
        var validator = new Validation(formToValidate);
        if(validator.validate()) {
        /* to check any image uploaded or not if so submit form with uploader plugin */
           if(extraObj.fileCounter > 1){
            extraObj.startUpload();
            }else{
                /*submit form with refresh*/
                //jQuery('#commentForm').submit();
                 /*submit form with ajax ajaxSubmit will be availabe by default in uploader plugin*/
                 jQuery('#commentForm').ajaxSubmit();
            }
        }

    });

提交表单而不上传图片

Submit form without uploading image

javascript

jquery-plugins

image-uploading