Question

当用户上传照片时，它会通过控制器（profile / upload_picture）上传，该控制器会运行文件类型，文件大小等的验证。

如果验证返回错误，则错误将通过前端的Ajax显示。这很有效。

但是如果验证没有返回错误，我想自动加载另一个允许用户裁剪图片的控制器/视图（profile / crop_picture）。

这可以通过Jquery使用malsup's Form plugin吗？

以下代码无法正常运行，我仍然停留在上传页面上。

这是我的代码：

jQuery in view

$("#file_select").change(function(){

        var options = {
        type:           'post',
        dataType:       'json',
        resetForm:      true,
        beforeSubmit:       function(){
                                $('#loading').show();
                                $('#validation_message').html('');
                        },
        success:            function(data){

                                if (data.success == 0) {
                                    $('#loading').hide();
                                    $('#validation_message').html(data.message).fadeIn();

                                } else {
                                    $('body').load('profile/crop_picture');
                                }
                        }
    };

    $('#upload_form').ajaxSubmit(options);
});

upload_picture controller

function upload_picture()
{
    if ($this->input->post('upload')) {

        $upload = $this->profile_model->upload_picture();

        if ($upload) { // if there are upload errors

            $val['success'] = '0';
            $val['message'] = '<div class="error_message" style="margin:20px 0">' . $upload . '</div>';
            echo '<textarea>' . json_encode($val) . '</textarea>'; 
        } else {

                   //redirecting here seems to have no effect

                }
    }

    $data['selector'] = 'picture';
    $data['records']  = $this->profile_model->get_user_data();

    $string = $this->load->view('account/prf/profile_crop_vw', $data, TRUE);
    $this->template->write('content', $string);
    $this->template->render();
}

Answer 1

你可以尝试javascript窗口加载功能。像这样：

$("#file_select").change(function(){

   var options = {
      type:          'post',
      dataType:      'json',
      resetForm:     true,
      beforeSubmit:  function() {
                        $('#loading').show();
                        $('#validation_message').html('');
                     },
      success:       function(data) {
                        if (data.success == 0) {
                           $('#loading').hide();
                           $('#validation_message').html(data.message).fadeIn();
                        } else {
                           window.location.href='profile/crop_picture';
                           location.reload();   
                        }
                    }
   };

   $('#upload_form').ajaxSubmit(options);

});

希望这能解决您的问题。

Answer 2

也许你可以做一个简单的重定向到裁剪页面。我无法看到您如何处理上传的图像，但您可以随时保存图像ID或网址或用作会话flashdata变量的任何内容，并在裁剪页面上使用它。

jQuery Form插件 - 有没有办法加载Ajax成功的页面？

2 个答案: