weixin_33725722 2018-07-26 22:55 采纳率: 0%
浏览 18

图片通过ajax提交

I'm trying to enhance the backend of a website to make it easier for the users to update products. I'm moving processes into interactive tooltips so that actions can be performed from the page that displays products, rather than get sent to different page types to make small changes.

I've come unstuck on a section for image upload though. I'm using this section of JS

$(document).ready(function() {
    $(".layout-save").click(function(e){
        e.preventDefault();
        console.log($(this).serialize());
        $.ajax({
            url: 'product_image_ajax.php?action=save',
            type: 'POST',
            data: $(this).serialize(), // it will serialize the form data
            dataType: 'html'
        })
        .done(function(data) {
            //console.log(data);
        })
        .fail(function(){
            alert('Ajax Submit for Image Save Failed ...'); 
        });
    });
});

And the basics of the form are

<form name="image_define" action="http://localhost/jsc/jscadmin/product_image_ajax.php?&amp;products_filter=310&amp;newImg=1&amp;action=save" method="post" enctype="multipart/form-data"><input type="hidden" name="securityToken" value="149cbe8b85ec27c089b867be283dff2e">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
  <tbody>
    <tr>
      <td class="jscBoxContent">or <input type="text" name="imgNewBaseDir" size="20"></td>
    </tr>
    <tr>
      <td class="jscBoxContent"><br><strong>Base image file</strong>&nbsp;&nbsp;<strong class="errorText">(required)</strong><br>An original image must be defined. The original image is assumed to be the smallest when medium or large images are entered.<br><input type="file" name="default_image" size="20" accept="image/jpeg,image/jpg,image/gif,image/png"><br></td>
    </tr>
    <tr>
      <td align="center" class="jscBoxContent"><br><input type="image" src="includes/languages/english/images/buttons/button_save.gif" border="0" alt="Save" title=" Save " class="layout-save" data-newimg="1">&nbsp; <input id="close-tooltip" type="button" value="Cancel" alt="Cancel" title="Cancel"></td>
    </tr>
  </tbody></table>
</form>

The actual php generating this HTML is

case 'layout_new':  
                if ( $action != 'layout_edit' ) {
                    $imgNameStr .= ( $no_images ) ? "&amp;newImg=1" : '&amp;imgBase='.$products_image_base
                                                  . "&amp;imgBaseDir=" . $products_image_directory 
                                                  . "&amp;imgExtension=" . $default_extension;
                    $heading[] = array(
                        'text' => '<strong>' . TEXT_INFO_NEW_PHOTO . '</strong>'
                    );
                }

                $contents = array(
                    'form' => zen_draw_form('image_define', FILENAME_PRODUCTS_IMAGE_AJAX, 
                        '&products_filter=' . $products_filter . $imgNameStr
                        . '&amp;action=save', 'post', 'enctype="multipart/form-data"')
                ); //steve check this &products_filter=

                // check if this is a master image or if no images exist
                if ($no_images) {
                    $contents[] = array(
                        'text' => '<strong>' . TEXT_INFO_IMAGE_BASE_NAME . '</strong><br />' 
                    );
                    $contents[] = array(
                        'text' => zen_draw_input_field('imgBase', '', 'size="30"')
                    );

                    $dir = @dir(DIR_FS_CATALOG_IMAGES);
                    $dir_info[] = array('id' => '', 'text' => TEXT_INFO_MAIN_DIR);
                    while ($file = $dir->read()) {
                        if (is_dir(DIR_FS_CATALOG_IMAGES . $file) 
                            && strtoupper($file) != 'CVS' 
                            && $file != "." 
                            && $file != ".." 
                            && $file != 'original' 
                            && $file != 'medium'
                            && $file != 'large') {
                            $dir_info[] = array('id' => $file . '/', 'text' => $file);
                        }
                    }
                    $contents[] = array('
                        text' => '<br /><strong>' . TEXT_INFO_BASE_DIR . '</strong><br />' . TEXT_INFO_NEW_DIR
                    );
                    $contents[] = array(
                        'text' => TEXT_INFO_IMAGE_DIR . zen_draw_pull_down_menu('imgBaseDir', $dir_info, "")
                    );
                    $contents[] = array(
                        'text' => TEXT_INFO_OR.' ' . zen_draw_input_field('imgNewBaseDir', '', 'size="20"') 
                    );
                } else if ($action != 'layout_edit') {
                    $contents[] = array(
                        'text' => '<strong>' . TEXT_INFO_IMAGE_SUFFIX . '</strong><br />' . TEXT_INFO_USE_AUTO_SUFFIX . '<br />' 
                    );
                    $contents[] = array(
                        'text' => zen_draw_input_field('imgSuffix', $selected_image_suffix, 'size="10"') 
                    );
                }

                // -----
                // Set up the "acceptable" file types for the form, depending on whether or not the active product
                // currently has an image defined.
                //
                if ($no_images) {
                    $accept = 'image/jpeg,image/jpg,image/gif,image/png';
                } else {
                    switch (strtolower($products_image_extension)) {
                        case '.gif':
                            $accept = 'image/gif';
                            break;
                        case '.png':
                            $accept = 'image/png';
                            break;
                        case '.jpg':        //-Fall-through ...
                        case '.jpeg':
                            $accept = 'image/jpeg,image/jpg';
                            break;
                        default:
                            $accept = 'image/jpeg,/image/jpg,image/gif,image/png';
                            break;
                    }
                }
                $file_parms = 'accept="' . $accept . '"';

                // Image fields
                if ( $action == 'layout_new' ) {// display warning on edit screen that the default file must be filled in
                    //-------------------------
                    $contents[] = array(
                        'text' => '<br /><strong>' . TEXT_INFO_DEFAULT_IMAGE . '</strong>&nbsp;&nbsp;<strong class="errorText">(required)</strong><br />' 
                            . TEXT_INFO_DEFAULT_IMAGE_HELP . '<br />'
                            . zen_draw_input_field('default_image', '', 'size="20" ' . $file_parms, false, 'file') . '<br />' . $pInfo->products_image
                    );

                } else {
                    $contents[] = array(
                        'text' => '<br /><strong>' . TEXT_INFO_DEFAULT_IMAGE . '</strong><br />' 
                            . TEXT_INFO_DEFAULT_IMAGE_HELP . '<br />'
                            . zen_draw_input_field('default_image', '', 'size="20" '. $file_parms, false, 'file') . '<br />' . $pInfo->products_image
                    );
                }

When the form is submitted,

console.log($(this).serialize());

is empty, and thus the image isn't updated.

Is there any special process for managing image uploads via an AJAX call as I don't understand why the original form works fine until I try to submit without a page reload. (Note, I know tables are outdated, and they will be removed once the core process is working)

  • 写回答

1条回答

      报告相同问题?

      相关推荐 更多相似问题

      悬赏问题

      • ¥15 android freedom
      • ¥15 使用自定义的类型代替内置类型可行吗
      • ¥15 关于STM32的SPI和ENDAT接口编码器通信的问题
      • ¥15 关于#pdfbox#生成的PDF文件正常,转图片中文乱码的问题,如何解决?
      • ¥15 ADS中有关DAC控件的使用问题
      • ¥15 win11如何运行geoserver
      • ¥15 审稿意见请教-用ERNIE进行小样本分类的对比实验问题
      • ¥15 gem5搭建arm v8
      • ¥15 安卓时间管理APP,怎么做
      • ¥15 这段有什么bug 为什么总报错