使用Uploadify檢索JSON數組響應？

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