jQuery的圖片上傳 - 笨

使用jQuery圖片上傳這樣http://blueimp.github.com/jQuery-File-Upload/jQuery的圖片上傳 - 笨

我得到的縮略圖，點擊上傳按鈕，我得到了進度條後，但隨後得到「語法錯誤：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); 
     } 
    }  
}

任何幫助？

來源

2012-01-31 Laky

檢查：https://github.com/blueimp/jQuery-File-Upload/issues/ 517看起來像一個常見問題。 – Marcus 2012-01-31 23:02:35

謝謝，但我應該從哪裏發佈最後一篇文章中的代碼？當我把__construct（）放在__construct（）中時，我得到錯誤：消息：未定義的屬性：upload :: $ _ request – Laky 2012-01-31 23:11:46

在github上，帖子提到將代碼放在操作的開頭 - 所以我想在你的do_upload函數中。目前無法測試自己，抱歉=/ – Marcus 2012-01-31 23:19:46

好了開始，沒有在您的視圖底部引用的腳本文件的存在：

這會顯示在您的Web控制檯中。儘量隨時關注它。

轉到This GitHub Page並按照指示使這個啓動並運行的w/CodeIgniter。

來源

2012-02-14 07:09:47

即使文件上傳成功，我也會收到此錯誤。我遇到的問題是我回來的。更多信息可以在這裏找到https://github.com/blueimp/jQuery-File-Upload/wiki/Setup和部分標示使用自定義服務器端上傳處理器

使用jQuery文件上傳（UI版本），所以它基本上是說：「請注意，響應應該永遠是一個JSON對象包含一個文件數組，即使只有一個文件上傳。「即使遇到服務器端錯誤，您仍然應該傳回文件數組。

這裏是我的上傳功能的例子（按鍵部分是「回聲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); 
    } 
}

來源

2013-02-19 02:43:54

jQuery的圖片上傳 - 笨

回答

相關問題