Preview image after uploading using Form API
Define the theme in the field, and simulate the code structure to preview the image that you just upload. My solution is as follows,

$form['abc_field']['abc_filename'] = array(
        '#type' =&gt; 'managed_file',
        '#title' =&gt; t('abc image'),
        '#upload_validators' =&gt; array(
            'file_validate_extensions' =&gt; array('gif png jpg jpeg'),
            'file_validate_size' =&gt; array(1 * 1024 * 1024),
        ),
        '#theme' =&gt; 'abc_thumb_upload',
        '#upload_location' =&gt; 'public://abc/'
    );


In your hook_theme(),

return array(
    'abc_thumb_upload' =&gt; array(
        'render element' =&gt; 'element',
        'file'           =&gt; 'abc.module',
));


In your theme_abc_thumb_upload(),

function theme_abc_thumb_upload($variables) {

    $element = $variables['element'];

    if (isset($element['#file']-&gt;uri)) {
        $output = '&lt;div id="edit-logo-ajax-wrapper"&gt;&lt;div class="form-item form-type-managed-file form-item-logo"&gt;&lt;span class="file"&gt;';
        $output .= '&lt;img height="50px" src="' . file_create_url($element['#file']-&gt;uri) . '" /&gt;';
        $output .= '&lt;/span&gt;&lt;input type="submit" id="edit-' . $element['#name'] . '-remove-button" name="' . $element['#name'] . '_remove_button" value="Remove" class="form-submit ajax-processed"&gt;';
        $output .= '&lt;input type="hidden" name="' . $element['#name'] . '[fid]" value="' . $element['#file']-&gt;fid . '"&gt;';

        return $output;
    }
}