未捕获的 SyntaxError：带有 jQuery 插件的意外标记 x？答案

【问题标题】：Uncaught SyntaxError: Unexpected token x with jQuery plugin?未捕获的 SyntaxError：带有 jQuery 插件的意外标记 x？
【发布时间】：2014-01-29 19:31:09
【问题描述】：

我目前正在使用 uploadify jQuery 插件将图像上传到文件夹。图片上传部分工作正常，但是当我尝试添加额外的表单数据时，它给了我错误Uncaught SyntaxError: Unexpected token x。

我正在以 JSON 数组的形式检索数据，并且我的响应标头内容类型是 application/json，但不确定它为什么会引发此错误。

我的问题是：根据下面的代码，为什么会出现此错误以及解决方案是什么？

jQuery:

          $('#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) {
                    var responseObj = JSON.parse(data);
                    if(responseObj.file_name){
                        $('#cover-image').css("background-image", "url('http://localhost:8888/SimpleBlog/uploads/"+responseObj.file_name+"')");     
                        $('#cover-image').css("background-size", "cover");
                        $('#cover-image').css("background-position", "center");
                    }
                },
                'onUploadStart' : function(file) {
                    var uri = window.location.pathname.split('/').pop();
                    $('#userfile').uploadify("settings", 'formData', {'pst_str' : uri});
                }
            });

PHP - post/cover_upload

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);
    }

    if($this->input->post('pst_str') == "add"){
        $pst_str = $this->create_temp_post();
    }else{
        $pst_str = $this->input->post('pst_str');
    }

    $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),
        'pst_str'       => $pst_str
    );

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

    if ( !$this->upload->do_upload() ) {
        $upload_error = $this->upload->display_errors();
        echo json_encode($upload_error);
    }else{
        header("content-type:application/json");

        $file_info = $this->upload->data();
        $this->post_model->add_cover($pst_str, $file_info['file_name']);

        echo json_encode($file_info);

    }

}

非常感谢任何帮助。

【问题讨论】：

你的数据响应是什么样的？
喜欢{"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"};

标签： javascript php jquery json uploadify

【解决方案1】：

这似乎是您的 JSON 格式的方式。尝试以这种方式解析您的响应。

   if(data.file_name){
     $('#cover-image').css("background-image", "url('http://localhost:8888/SimpleBlog/uploads/"+data.file_name+"')");     
      $('#cover-image').css("background-size", "cover");
      $('#cover-image').css("background-position", "center");
    }

http://jsfiddle.net/Ef7b3/

【讨论】：