Question

我目前正在使用Uploadify插件使用AJAX将图像上传到我的网站的特定目录。这很好用！

当我上传图像时，我使用PHP处理服务器端功能，并将图像名称更改为随机的16个字符串。

我肯定在网络选项卡中的开发人员工具中获得了正确的响应，所以它只是jQuery不正确。我的回答是一个JSON数组。

我要做的是检索16个字符的字符串，然后在上传后立即显示图像？所以我真的需要得到这个随机的16个字符串。

HTML：

    <div class="container">

        <?php echo form_open_multipart(); ?>
        <ul class="unstyled">
            <li>
                <?php echo form_upload('userfile','','id="userfile"'); ?>
                <?php echo (isset($error)) ? $error : ''; ?>
            </li>
            <li>
                <?php echo form_button(array('content'=> 'Upload', 'id'=>'upload-file', 'class'=>'btn btn-large btn-primary')); ?>
            </li>
        </ul>
        <?php echo form_close(); ?>

    </div>

JS / jQuery的：

    <script type="text/javascript">
        $(document).ready(function () {

            var base_url = '<?php echo base_url(); ?>';

            $('#upload-file').on('click', function (e) {

                e.preventDefault();
                $('#userfile').uploadify('upload', '*');


            });

            $('#userfile').uploadify({

                'auto':false,
                'swf': base_url + 'assets/js/jquery/uploadify_31/uploadify.swf',
                'uploader': base_url + 'post/cover_upload',
                'cancelImg': base_url + 'assets/jquery/uploadify-cancel.png',
                'fileTypeExts':'*.jpg;*.bmp;*.png;*.tif;*.gif;*.jpeg',
                'fileTypeDesc':'Image Files (.jpg,.bmp,.png,.tif,.gif,.jpeg)',
                'fileSizeLimit':'10MB',
                'fileObjName':'userfile',
                'buttonText':'Select Photo(s)',
                'multi':true,
                'removeCompleted':false,
                'onComplete': function(event, queueID, fileObj, response, data) {
                    var json = jQuery.parseJSON(fileObj);
                    alert("Random Image String: " + json.file_name);
                }   
            });

        });
    </script>

PHP：

public function cover_upload(){

    $this->load->library('upload');

    $image_upload_folder = FCPATH . '/uploads';

    if (!file_exists($image_upload_folder)) {
        mkdir($image_upload_folder, DIR_WRITE_MODE, true);
    }

    $this->upload_config = array(
        'upload_path'   => $image_upload_folder,
        'allowed_types' => 'png|jpg|jpeg|bmp|tiff',
        'max_size'      => 36000,
        'max_width'     => 10240,
        'max_height'    => 7680,
        'remove_space'  => TRUE,
        'file_name'     => random_string('alnum', 16)
    );

    $this->upload->initialize($this->upload_config);

    if ( !$this->upload->do_upload() ) {
        $upload_error = $this->upload->display_errors();
        echo json_encode($upload_error);
    } else {
        $file_info = $this->upload->data();
        echo json_encode($file_info);
        // echo $file_info['file_name'];
    }

}

JSON响应：

client_name: "banana-gif.jpg"
file_ext: ".jpg"
file_name: "Rl4dmhySHWgrAsH6.jpg"
file_path: "/Applications/MAMP/htdocs/SimpleBlog/uploads/"
file_size: 22.85
file_type: "image/jpeg"
full_path: "/Applications/MAMP/htdocs/SimpleBlog/uploads/Rl4dmhySHWgrAsH6.jpg"
image_height: 534
image_size_str: "width="950" height="534""
image_type: "jpeg"
image_width: 950
is_image: true
orig_name: "Rl4dmhySHWgrAsH6.jpg"
raw_name: "Rl4dmhySHWgrAsH6"

非常感谢任何帮助，谢谢！

Answer 1

Uploadify没有onComplete功能。您需要使用具有响应参数的onUploadSuccess。像这样的东西

          $('#userfile').uploadify({
                'auto':false,
                'swf': base_url + 'assets/js/jquery/uploadify_31/uploadify.swf',
                'uploader': base_url + 'post/cover_upload',
                'cancelImg': base_url + 'assets/jquery/uploadify-cancel.png',
                'fileTypeExts':'*.jpg;*.bmp;*.png;*.tif;*.gif;*.jpeg',
                'fileTypeDesc':'Image Files (.jpg,.bmp,.png,.tif,.gif,.jpeg)',
                'fileSizeLimit':'10MB',
                'fileObjName':'userfile',
                'buttonText':'Select Photo(s)',
                'multi':true,
                'removeCompleted':false,
                'onUploadSuccess' : function(file, data, response) {
                     alert("Random Image String: " + data.file_name);
                 }  
            });

修改

当然它会给你一个错误，这不是你更新的例子中的有效JSON字符串。 PHP的json_encode应该在数组上使用。结果看起来应该是这样的。

{"client_name": "banana-gif.jpg","file_ext": ".jpg","file_name":"Rl4dmhySHWgrAsH6.jpg","file_path":"\/Applications\/MAMP/htdocs\/SimpleBlog\/uploads\/","file_size": "22.85","file_type": "image/jpeg","full_path":"\/Applications\/MAMP\/htdocs\/SimpleBlog\/uploads\/Rl4dmhySHWgrAsH6.jpg","image_height": "534","image_size_str": "width=\"950\" height=\"534\"","image_type":"jpeg","image_width": "950","is_image": true,"orig_name": "Rl4dmhySHWgrAsH6.jpg","raw_name": "Rl4dmhySHWgrAsH6"};

双引号和正斜杠也必须转义。 json_encode应该为您做到这一点。

然后您可以像alert("Random Image String: " + data.file_name); JSFIDDLE
一样使用它

使用Uploadify检索JSON数组响应？

1 个答案: