尝试使用uploadify上传时，为什么会出现HTTP错误

时间：2012-10-30 12:58:06

标签： ajax codeigniter jquery uploadify

我选择了gallerycms来构建我自己的画廊但是当我尝试将其作为模块进入我的codeigniter cms时，我收到此错误HTTP错误。我不知道为什么我看到这个错误，虽然我正在复制所有控制器，模型，视图，核心文件，我仍然得到这个错误。

注意：使用Gallerycms上传可以很好地工作，但是当我想将它作为模块添加到我的cms中时，我收到此错误：

error capture

error from chrome console firebug代码

<script type="text/javascript">
$(document).ready(function() {
$('.btn-group > a').tooltip();
$('#upload-btn').hide();
$('#new-images').hide();
$('a.img-fancy').fancybox();
$('.image-delete-btn').click(function() {
deleteUrl = $(this).attr('action');
});
$('#image-modal').on('show', function() {
$('#image-modal-delete-btn').attr('href', deleteUrl);
});
$("#sortable").sortable({
handle : '.drag-handle',
update : function () {
var order = $('#sortable').sortable('serialize', { key : 'order_num[]' });
$.ajax({
url : 'http://localhost/gallery/album/reorder?' + order,
type : 'GET',
cache : false,
success : function(response) {
$('#reorder-feedback').show();
$('#reorder-feedback').html('<a class="close" data-dismiss="alert">x</a><strong>Changed image order successfully.</strong>');
},
error : function(jqXHR, textStatus, errorThrown) {
alert('An error occured when ordering the images.');
}
});
}
});
$( "#sortable" ).disableSelection();
$('#file_upload').uploadify({
'uploader' : 'http://localhost/gallery/webroot/flash/uploadify.swf',
'script' : 'http://localhost/gallery/api/upload/3',
'cancelImg' : 'http://localhost/gallery/webroot/images/cancel.png',
'folder' : '/webroot/uploads',
'auto' : false,
'multi' : true,
'fileExt' : '*.jpg;*.jpeg;*.gif;*.png',
'fileDesc' : 'Image files',
'sizeLimit' : 2097152, // 2MB
'wmode' : 'opaque',
'onSelect' : function(event, ID, fileObj) {
$('#upload-btn').show();
},
'onCancel' : function(event, ID, fileObj) {
$('#upload-btn').hide();
},
'onError' : function(event, ID, fileObj, errorObj) {
},
'onComplete' : function(event, ID, fileObj, response, data) {
var fileName = response;
$('#upload-btn').hide();
$('#new-images').show();
$.ajax({
url : 'http://localhost/gallery/album/resize/3/' + response,
type : 'POST',
cache : false,
success : function(response) {
if (response !== 'failure') {
var new_image = '<li><img src="http://localhost/gallery/webroot/uploads/' + response + '" /><br />' + response + '</li>';
$('#new-image-list').append(new_image);
} else {
var fail_message = '<li>Thumbnail creation failed for: ' + fileObj.name + '</li>';
$('#new-image-list').append(fail_message);
}
},
error : function(jqXHR, textStatus, errorThrown) {
alert('Error occurred when generating thumbnails.');
}
});
}
});
});
</script>

api控制器

/ **    *处理图像上传。    *    * @param类型$ album_id    * / 

  public function upload($album_id)
  {
    $config = array();
    $config['upload_path']    = './webroot/uploads/';
    $config['allowed_types']  = 'gif|jpg|png';
    $config['max_size']       = '2048'; // 2MB
    $config['remove_spaces']  = TRUE;
    $config['encrypt_name']   = TRUE;
    $config['overwrite']      = FALSE;
    $this->load->library('upload', $config);
    if ( ! $this->upload->do_upload('Filedata'))
    {
      header('HTTP/1.1 500 Internal Server Error');
      exit();
    }
    else
    {
      $upload_info = $this->upload->data();

      $album_config = $this->config_model->get_by_album_id($album_id);

      // Insert file information into database
      $now = date('Y-m-d H:i:s');
      $order_num = $this->image_model->get_last_order_num($album_id);
      if (empty($order_num))
      {
        $order_num = 0;
      }
      $order_num++;
      $image_data = array(
      'album_id'       => $album_id,
      'uuid'           => $this->create_uuid(),
      'name'           => $upload_info['file_name'],
      'order_num'      => $order_num,
      'caption'        => '',
      'raw_name'       => $upload_info['raw_name'],
      'file_type'      => $upload_info['file_type'],
      'file_name'      => $upload_info['file_name'],
      'file_ext'       => $upload_info['file_ext'],
      'file_size'      => $upload_info['file_size'],
      'path'           => $config['upload_path'],
      'full_path'      => $upload_info['full_path'],
      'published'      => $album_config->auto_publish,
      'created_at'     => $now,
      'updated_at'     => $now,
      );

      $image_id = $this->image_model->create($image_data);


      $this->album_model->update(array('updated_at' => $now), $album_id);

      echo $image_id;
    }
  }




}

视图/ images.php 

<?php
$includes = array(
    'js' => array('jquery-ui-1.8.18.custom.min.js', 'swfobject.js', 'jquery.uploadify.v2.1.4.min.js', 'fancybox/jquery.fancybox-1.3.4.pack.js'), 
    'css' => array('uploadify.css', 'fancybox/jquery.fancybox-1.3.4.css'));
?>
<?php $this->load->view('album/inc/header', $includes); ?>

<?php if (isset($flash)): ?>
<div class="alert alert-success"><a class="close" data-dismiss="alert">x</a><strong><?php echo $flash; ?></strong></div>
<?php endif; ?>

<div class="w100" style="margin-bottom: 10px;">

  <ul class="pager">
    <li class="previous">
        <a href="<?php echo base_url('album'); ?>">&larr; Back to albums</a>
    </li>
  </ul>
  <div class="well">
    <h4 style="margin-bottom: 10px;">Upload images for album: <?php echo $album->name; ?></h4>
    <input id="file_upload" type="file" name="file_upload" />
    <p id="upload-btn" style="margin:10px 0;">
      <a href="javascript:$('#file_upload').uploadifyUpload()" class="btn btn-primary btn-large">Upload Files</a>
    </p>
    <div id="new-images">
      <h4>Uploaded Images</h4>
      <p><a class="btn" href="<?php echo site_url("album/images/$album->id"); ?>" style="margin: 10px 0;"><i class="icon-refresh"></i> Refresh</a></p>
      <ul id="new-image-list"></ul>
      <div class="clear"></div>
    </div>
  </div>
</div>

<div id="reorder-feedback" class="alert alert-success" style="display: none;"></div>

<span class="left w75">
  <?php 
  $total_file_size = 0;
  $total_images = 0;
  $img_url = '';
  ?>
  <?php if (isset($images)): ?>
  <ul id="sortable">
    <?php foreach ($images as $image): ?>
    <?php 
    $total_file_size += $image->file_size; 
    $total_images++;
    $img_url = base_url() . 'webroot/uploads/' . $image->file_name;
    ?>
    <li id="image_<?php echo $image->id; ?>" class="ui-state-default" style="height: <?php echo $config->thumb_height + 10; ?>px">
      <div class="drag-handle" style="height: <?php echo $config->thumb_height + 5; ?>px"></div>
      <div class="image-container">
        <a class="album-images img-fancy thumbnail" href="<?php echo $img_url; ?>" title="<?php echo $image->caption; ?>">
          <img src="<?php echo base_url() . 'webroot/uploads/' . $image->raw_name . '_thumb' . $image->file_ext . '?r=' . rand(); ?>" alt="<?php echo $image->caption; ?>" />
        </a>
      </div>
      <div class="info" style="left: <?php echo $config->thumb_width + 50; ?>px">
        File name: <?php echo $image->name; ?><br />
        Caption: 
          <?php if (empty($image->caption)): ?>
            <a href="<?php echo site_url("image/edit/$album->id/$image->id"); ?>">Create one</a>
          <?php else: ?>
            <?php echo $image->caption; ?> 
          <?php endif; ?>
          <br />
        <?php /* Comments: <?php echo $image->comments; ?><br /> */ ?>
        File size: <?php echo $image->file_size; ?> KB<br />
      </div>
      <div class="btn-group">
        <a href="<?php echo $img_url; ?>" class="btn img-fancy" rel="tooltip" data-original-title="Preview"><i class="icon-zoom-in"></i></a>
        <a href="<?php echo site_url("image/download/$image->id"); ?>" class="btn" title="Download" rel="tooltip" data-original-title="Download"><i class="icon-download-alt"></i></a>
        <a href="<?php echo site_url("image/edit/$album->id/$image->id"); ?>" class="btn" title="Edit" rel="tooltip" data-original-title="Edit"><i class="icon-pencil"></i></a>
        <?php /* <a href="<?php echo site_url("image/comments/$album->id/$image->id"); ?>" class="btn" title="Comments" rel="tooltip" data-original-title="Comments"><i class="icon-comment"></i></a> */ ?>
        <?php if ($image->published == 1): ?>
        <a href="<?php echo site_url("image/unpublish/$album->id/$image->id"); ?>" class="btn btn-success" title="Published" rel="tooltip" data-original-title="Published"><i class="icon-ok icon-white"></i></a>
        <?php else: ?>
        <a href="<?php echo site_url("image/publish/$album->id/$image->id"); ?>" class="btn" title="Unpublished" rel="tooltip" data-original-title="Unpublished"><i class="icon-ok"></i></a>
        <?php endif; ?>
        <a href="#image-modal" class="btn btn-danger image-delete-btn" title="Delete" rel="tooltip" action="<?php echo site_url("image/remove/$album->id/$image->id"); ?>" data-toggle="modal" data-original-title="Delete"><i class="icon-remove icon-white"></i></a>
      </div>
    </li>
    <?php endforeach; ?>
  </ul>
  <?php endif; ?>
</span>
<span class="right w20">
  <div class="well sidebar-nav">
    <ul class="nav nav-list">
      <li class="nav-header"><?php echo $album->name; ?></li>
      <li><a href="<?php echo site_url("album/edit/$album->id"); ?>"><i class="icon-pencil"></i>Rename</a></li>
      <li><a href="<?php echo site_url("album/configure/$album->id"); ?>"><i class="icon-cog"></i>Configure</a></li>
      <li class="nav-header">Info</li>
      <li>Images: <?php echo $total_images; ?></li>
      <li>Album file size: <?php echo round($total_file_size / 1024, 2); ?> MB</li>
    </ul>
  </div>
</span>
<div class="clear"></div>

<div class="modal hide fade" id="image-modal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Delete Image</h3>
  </div>
  <div class="modal-body">
    <p><strong>Are you sure you want to delete this image?</strong></p>
  </div>
  <div class="modal-footer">
    <a id="image-modal-delete-btn" href="#" class="btn btn-danger">Delete</a>
    <a href="#" class="btn" data-dismiss="modal">Cancel</a>
  </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
  $('.btn-group > a').tooltip();
  $('#upload-btn').hide();
  $('#new-images').hide();

  $('a.img-fancy').fancybox();

  $('.image-delete-btn').click(function() {
    deleteUrl = $(this).attr('action');
  });

  $('#image-modal').on('show', function() {
    $('#image-modal-delete-btn').attr('href', deleteUrl);
  });

  $("#sortable").sortable({
    handle : '.drag-handle',
    update : function () { 
      var order = $('#sortable').sortable('serialize', { key : 'order_num[]' }); 
      $.ajax({
        url          : '<?php echo base_url(); ?>album/reorder?' + order,
        type         : 'GET',
        cache        : false,
        success      : function(response) {
          $('#reorder-feedback').show();
          $('#reorder-feedback').html('<a class="close" data-dismiss="alert">x</a><strong>Changed image order successfully.</strong>');
        },
        error        : function(jqXHR, textStatus, errorThrown) {
          alert('An error occured when ordering the images.');
        }
      });
    }
  });

  $( "#sortable" ).disableSelection();


  $('#file_upload').uploadify({
    'uploader'       : '<?php echo base_url(); ?>webroot/flash/uploadify.swf',
    'script'         : '<?php echo base_url(); ?>album/api/upload/<?php echo $album->id;  ?>',
    'cancelImg'      : '<?php echo base_url(); ?>webroot/images/cancel.png',
    'folder'         : '/webroot/uploads',
    'auto'           : false,
    'multi'          : true,
    'fileExt'        : '*.jpg;*.jpeg;*.gif;*.png',
    'fileDesc'       : 'Image files',
    'sizeLimit'      : 2097152, // 2MB
    'wmode'          : 'opaque',
    'onSelect'       : function(event, ID, fileObj) {
      $('#upload-btn').show();
    },
    'onCancel'       : function(event, ID, fileObj) {
      $('#upload-btn').hide();
    },
    'onError'        : function(event, ID, fileObj, errorObj) {

    },
    'onComplete'     : function(event, ID, fileObj, response, data) {
      var fileName = response;
      $('#upload-btn').hide();
      $('#new-images').show();
      $.ajax({
        url          : '<?php echo base_url(); ?>album/resize/<?php echo $album->id; ?>/' + response,
        type         : 'POST',
        cache        : false,
        success      : function(response) {
          if (response !== 'failure') {
            var new_image = '<li><img src="<?php echo base_url(); ?>webroot/uploads/' + response + '" /><br />' + response + '</li>';
            $('#new-image-list').append(new_image);
          } else {
            var fail_message = '<li>Thumbnail creation failed for: ' + fileObj.name + '</li>';
            $('#new-image-list').append(fail_message);
          }
        },
        error        : function(jqXHR, textStatus, errorThrown) {
          alert('Error occurred when generating thumbnails.');
        }
      });
    }
  });
});
</script>

4 个答案:

答案 0 :(得分：2)

我不确定这是否有帮助。

之前我遇到过同样的问题， 然后我意识到当我将文件上传到服务器时， 我以root用户身份登录，因此文件所有者是root用户。 解决方案是删除所有上传的文件，然后再使用其他用户上传。

现在它运作良好。

希望这对你有用。

答案 1 :(得分：0)

文件扩展名的问题所以我替换了这段代码

$config['allowed_types']  = 'gif|jpg|png';

与

 $config['allowed_types']  = '*';

然后我只选择了我喜欢的jquery代码扩展

'fileExt' : '*.jpg;*.jpeg;*.gif;*.png',

答案 2 :(得分：0)

您可以在application / config / mimes.php

中修改mime

变化：

'jpeg'  =>  array('image/jpeg', 'image/pjpeg'),
'jpg'   =>  array('image/jpeg', 'image/pjpeg'),
'jpe'   =>  array('image/jpeg', 'image/pjpeg'),
'png'   =>  array('image/png',  'image/x-png'),

要

'jpeg'  =>  array('image/jpeg', 'image/pjpeg', 'application/octet-stream'),
'jpg'   =>  array('image/jpeg', 'image/pjpeg', 'application/octet-stream'),
'jpe'   =>  array('image/jpeg', 'image/pjpeg', 'application/octet-stream'),
'png'   =>  array('image/png',  'image/x-png', 'application/octet-stream'),

它应该工作：）

答案 3 :(得分：-1)

您没有向我们提供详细错误。 HTTP错误可能意味着许多事情。

<强> 1。检查您的Firebug控制台或Chrome控制台以获取Ajax POST和     看看它的回报。  2.确保上载保存到的文件夹是可写的（CHMOD     权限）。

引起我注意的一件事是： 

$config['upload_path']    = './webroot/uploads/';

看起来您已复制粘贴此内容，请确保为其提供正确的上传路径。

相关问题
最新问题