Загрузка изображения jQuery - CodeIgniter - PullRequest
5 голосов
/ 01 февраля 2012

Я использую jQuery для загрузки изображений следующим образом http://blueimp.github.com/jQuery-File-Upload/

Я получаю миниатюру и после нажатия кнопки загрузки я получаю индикатор выполнения, но затем получаю «SyntaxError: JSON.parse: неожиданный символ»

просмотр страницы

</body>
</html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Demo</title>

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/bootstrap-image-gallery.min.css">
<!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/bootstrap-ie6.min.css"><![endif]-->
<link rel="stylesheet" href="http://blueimp.github.com/jQuery-File-Upload/jquery.fileupload-ui.css">
<style type="text/css">body {padding-top: 80px;}</style>
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bar and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.">
</head>
<body>

<div class="container">


    <?php echo form_open_multipart('upload/do_upload', array('id'=>'fileupload')); ?>


        <div class="row">
            <div class="span16 fileupload-buttonbar">
                <div class="progressbar fileupload-progressbar fade"><div style="width:0%;"></div></div>
                <span class="btn success fileinput-button">
                    <span>Add files...</span>
                    <input type="file" name="userfile[]" multiple>
                </span>
                <button type="submit" class="btn primary start">Start upload</button>
                <button type="reset" class="btn info cancel">Cancel upload</button>
                <button type="button" class="btn danger delete">Delete selected</button>
                <input type="checkbox" class="toggle">
            </div>
        </div>
        <br>
        <div class="row">
            <div class="span16">
                <table class="zebra-striped"><tbody class="files"></tbody></table>
            </div>
        </div>
    </form>

</div>
<!-- gallery-loader is the loading animation container -->
<div id="gallery-loader"></div>
<!-- gallery-modal is the modal dialog used for the image gallery -->
<div id="gallery-modal" class="modal hide fade">
    <div class="modal-header">
        <a href="#" class="close">&times;</a>
        <h3 class="title"></h3>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
        <a class="btn primary next">Next</a>
        <a class="btn info prev">Previous</a>
        <a class="btn success download" target="_blank">Download</a>
    </div>
</div>
<script>
var fileUploadErrors = {
    maxFileSize: 'File is too big',
    minFileSize: 'File is too small',
    acceptFileTypes: 'Filetype not allowed',
    maxNumberOfFiles: 'Max number of files exceeded',
    uploadedBytes: 'Uploaded bytes exceed file size',
    emptyResult: 'Empty file upload result'
};

</script>
<script id="template-upload" type="text/html">
{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
    <tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
        <td class="name">{%=file.name%}</td>
        <td class="size">{%=o.formatFileSize(file.size)%}</td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label important">Error</span> {%=fileUploadErrors[file.error] || file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            <td class="progress"><div class="progressbar"><div style="width:0%;"></div></div></td>
            <td class="start">{% if (!o.options.autoUpload) { %}<button class="btn primary">Start</button>{% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}<button class="btn info">Cancel</button>{% } %}</td>
    </tr>
{% } %}
</script>
<script id="template-download" type="text/html">
{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
    <tr class="template-download fade">
        {% if (file.error) { %}
            <td></td>
            <td class="name">{%=file.name%}</td>
            <td class="size">{%=o.formatFileSize(file.size)%}</td>
            <td class="error" colspan="2"><span class="label important">Error</span> {%=fileUploadErrors[file.error] || file.error%}</td>
        {% } else { %}
            <td class="preview">{% if (file.thumbnail_url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery"><img src="{%=file.thumbnail_url%}"></a>
            {% } %}</td>
            <td class="name">
                <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}">{%=file.name%}</a>
            </td>
            <td class="size">{%=o.formatFileSize(file.size)%}</td>
            <td colspan="2"></td>
        {% } %}
        <td class="delete">
            <button class="btn danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">Delete</button>
            <input type="checkbox" name="delete" value="1">
        </td>
    </tr>
{% } %}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="http://blueimp.github.com/jQuery-File-Upload/vendor/jquery.ui.widget.js"></script>
<!-- The Templates and Load Image plugins are included for the FileUpload user interface -->
<script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script>
<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
<!-- Bootstrap Modal and Image Gallery are not required, but included for the demo -->
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.min.js"></script>

<script src="http://blueimp.github.com/Bootstrap-Image-Gallery/bootstrap-image-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="http://blueimp.github.com/jQuery-File-Upload/jquery.iframe-transport.js"></script>
<script src="http://blueimp.github.com/jQuery-File-Upload/jquery.fileupload.js"></script>
<script src="http://blueimp.github.com/jQuery-File-Upload/jquery.fileupload-ui.js"></script>
<script src="http://blueimp.github.com/jQuery-File-Upload/application.js"></script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->
<!--[if gte IE 8]><script src="http://blueimp.github.com/jQuery-File-Upload/cors/jquery.xdr-transport.js"></script><![endif]-->


</body> 
</html>

страница контроллера:

class upload extends CI_Controller {

    function __construct()
    {
        parent::__construct();
        $this->load->helper(array('form', 'url'));



    }

    function index()
    {    
        $this->load->view('index');
    }

    function do_upload()
    {
        $config['upload_path'] = './uploads/'; // server directory
        $config['allowed_types'] = 'gif|jpg|png'; // by extension, will check for whether it is an image
        $config['max_size']    = '1000'; // in kb
        $config['max_width']  = '1024';
        $config['max_height']  = '768';

        $this->load->library('upload', $config);
        $this->load->library('Multi_upload');

        $files = $this->multi_upload->go_upload();

        if ( ! $files )        
        {
            $error = array('error' => $this->upload->display_errors());
            $this->load->view('index', $error);
        }    
        else
        {
            $data = array('upload_data' => $files);
            $this->load->view('upload_success', $data);
        }
    }    
}

Любая помощь?

Ответы [ 2 ]

1 голос
/ 19 февраля 2013

Я также получил эту ошибку, даже когда файлы были успешно загружены.Проблема, с которой я столкнулся, заключалась в том, что я возвращал.Дополнительную информацию можно найти здесь https://github.com/blueimp/jQuery-File-Upload/wiki/Setup и раздел, помеченный Использование загрузки файла jQuery (версия пользовательского интерфейса) с пользовательским обработчиком загрузки на стороне сервера

, поэтому в основном говорится: "Обратите внимание, что ответом всегда должен быть объект JSON, содержащий массив файлов, даже если загружен только один файл." Вы все равно должны передать массив файлов обратно, даже если вы получили ошибку на стороне сервера.

Вот пример моей функции загрузки (часть ключей - "echo json_encode"):

function upload_file($component_files_id = null,$thumb_width = 400)
{
    $config['upload_path'] = ($component_files_id) ? './documents/component_files/'.$component_files_id : './documents/image_uploads';
    if (!file_exists($config['upload_path']))
        @mkdir($config['upload_path'], 0777, true);

    $config['allowed_types'] = 'gif|jpg|png|pdf|doc|docx|docm|odt|xls|xlsx|xlsm|ods|csv';
    $config['max_size'] = '10000'; #in KB
    $config['max_width']  = '5000';
    $config['max_height']  = '5000';

    $this->load->library('upload', $config);
    if (!$this->upload->do_upload())
    {
        $error = $this->upload->display_errors('','');

        if(is_ajax()){
            $file['error'] = $error;
            echo json_encode(array('files'=>array($file)));
        }
        else
            set_message($error,'error',true);
    }
    else
    {
        $file = $this->upload->data();
        $file['is_image'] =  ($file['is_image'] == '1') ? 'TRUE' : 'FALSE';
        $file['updated_by'] = get_user('user_id');
        $file['created_by'] = get_user('user_id');
        if($component_files_id)
            $file['component_files_id'] = $component_files_id;
        //save the file details to the database
        $file_id = $this->page_model->save_file($file); 
        if($file['is_image'] == 'TRUE'){    
            $thumb_width = ($component_files_id) ? 290 : $thumb_width; 
            $this->_create_thumbnail($file_id,$thumb_width);
        }
        //set the data for the json array   
        $info->id = $file_id;
        $info->name = $file['file_name'];
        $info->size = $file['file_size'];
        $info->type = $file['file_type'];
        if($file['is_image'] == 'TRUE'){
            $info->url =    base_url().'files/image/'.$file_id;
            $info->thumbnail_url = base_url().'files/image/'.$file_id.'/thumb';
        }
        else{
            $info->url =    base_url().'files/download/'.$file_id;
            $info->thumbnail_url = base_url().'images/document-icon.png';               
        }               

        $info->delete_url = base_url().'files/delete_document/'.$file_id;
        $info->delete_type = 'DELETE';  
        $files['files'] = array($info);
        header('Content-type: text/html');
        echo json_encode($files);
    }
}
0 голосов
/ 14 февраля 2012

Хорошо, чтобы начать, ни один из файлов скриптов, на которые есть ссылки в нижней части вашего представления, не существует:

  1. http://blueimp.github.com/jQuery-File-Upload/vendor/jquery.ui.widget.js
  2. http://blueimp.github.com/Bootstrap-Image-Gallery/bootstrap-image-gallery.min.js
  3. http://blueimp.github.com/jQuery-File-Upload/jquery.fileupload.js
  4. http://blueimp.github.com/jQuery-File-Upload/jquery.fileupload-ui.js
  5. http://blueimp.github.com/jQuery-File-Upload/jquery.iframe-transport.js
  6. http://blueimp.github.com/jQuery-File-Upload/application.js

Это будет отображаться в вашей веб-консоли. Старайтесь всегда следить за этим.

Перейдите на на эту страницу GitHub и следуйте инструкциям, чтобы получить этот обновленный w / CodeIgniter.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...