Ajax图像上传 - 获取完整图像(wordpress)

时间:2015-01-24 14:20:47

标签: javascript php jquery ajax wordpress

我在上传到表单时尝试访问完整图片。我当然知道如何访问缩略图,但不知道如何访问原始未修改的图像。 console.log(data)只显示两个参数Thumbnail和ID。

如果您需要其他文件信息,请与我们联系,谢谢。

javascript文件:

//add pin from computer
    $('#pin_upload_file').change(function() {
        $('.error-msg').hide();
        $('#pin_upload_form').submit();
    });

    if ($('#pin_upload_form').length) {
        var options = {
            beforeSubmit: showRequest,
            uploadProgress: function(event, position, total, percentComplete) {
                if (window.FormData !== undefined) {
                    $('#pin-upload-progress').show();
                    $('#pin-upload-progress .progress-bar-text').text(percentComplete + '%');
                    $('#pin-upload-progress .progress-bar').css('width', percentComplete + '%');
                }
            },
            success: showResponse,
            url: obj_ipin.ajaxurl
        };
        $('#pin_upload_form').ajaxForm(options);
    }

    function showRequest(formData, jqForm, options) {
        $('#pin-upload-from-web-wrapper, #browser-addon, #bookmarklet, #pinitbutton').slideUp();
        if (window.FormData === undefined) {
            $('#pin-upload-from-computer-wrapper .ajax-loader-add-pin').show();
        }

        var ext = $('#pin_upload_file').val().split('.').pop().toLowerCase();
        if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
            $('#pin-upload-from-computer-wrapper .ajax-loader-add-pin, #pin-upload-progress').hide();
            $('.error-msg').html('<div class="alert alert-warning"><strong>' + obj_ipin.__invalidimagefile + '</strong></div>').fadeIn();
            return false;
        }
    }

    function showResponse(responseText, statusText, xhr, $form) {
        if (responseText == 'error') {
            $('.ajax-loader-add-pin, #pin-upload-progress').hide();
            $('.error-msg').html('<div class="alert alert-warning"><strong>' + obj_ipin.__invalidimagefile + '</strong></div>').fadeIn();
        } else if (responseText == 'errorsize') {
            $('.ajax-loader-add-pin, #pin-upload-progress').hide();
            $('.error-msg').html('<div class="alert alert-warning"><strong>' + obj_ipin.__imagetoosmall + '</strong></div>').fadeIn();
        } else {
            var data = $.parseJSON(responseText);
            $('#thumbnail').attr('src', data.thumbnail);
            $('#attachment-id').val(data.id);
            $('.ajax-loader-add-pin, .error-msg, #pin-upload-progress').hide();
            $('#pin-upload-from-computer-wrapper').slideUp(function() {
                $('#pin-upload-postdata-wrapper').slideDown();
                $('#pin-postdata-form #pin-title').focus();
            });
        }
    }

php文件:

<div id="pin-upload-from-computer-wrapper" class="jumbotron">
                <h4><?php _e('From Device', 'ipin'); ?></h4>
                <form id="pin_upload_form" method="post" action="#" enctype="multipart/form-data">
                    <div class="upload-wrapper btn btn-success btn-block">
                        <span><?php _e('Browse &amp; Upload', 'ipin'); ?></span>
                        <input id="pin_upload_file" class="upload" type="file" name="pin_upload_file" accept="image/*" /> 
                    </div>
                    <input type="hidden" name="ajax-nonce" id="ajax-nonce" value="<?php echo wp_create_nonce('upload_pin'); ?>" />
                    <input type="hidden" name="mode" id="mode" value="computer" />
                    <input type="hidden" name="action" id="action" value="ipin-upload-pin" />
                    <div class="ajax-loader-add-pin ajax-loader hide"></div>                    
                    <div id="pin-upload-progress" class="progress progress-striped active hide">
                        <div class="progress-bar-text"></div>
                        <div class="progress-bar progress-bar-info"></div>

                    </div>
                </form>
            </div>

0 个答案:

没有答案