2014-01-28 47 views
-1
通過

我試圖通過Ajax調用上傳圖片和笨:AJAX笨 - 您沒有選擇要上傳的文件(錯誤) - 如何將文件通過AJAX

筆者認爲:

  <?php echo form_open_multipart('upload/do_upload'); ?> 
      <input type="file" name="userfile" id="userfile" size="20" /> 
      <br /> 
      <input type="submit" value="upload" id="upload_file_1" /> 
      </form> 

我的AJAX調用:

$(document).ready(function(){ 
    $(function() { 
     $('#upload_file_1').click(function(e) { 
      e.preventDefault(); 
      var filename = $("#userfile").val(); 
      $.ajax({ 
       url   :'index.php/upload/do_upload', 
       secureuri  :false,     
       fileElementId: 'userfile', 
       dataType : 'json', 
       type : 'POST', 
       done : function (data) 
       { 

        alert(data); 
       } 
      });    
     }); 
    }); 
}); 

和我的控制器:

class Upload extends CI_Controller { 

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

    function index() { 
     $this->load->view('upload_form', array('error' => ' ')); 
    } 

    function do_upload() { 
     $config['upload_path'] = './uploads/'; 
     $config['allowed_types'] = 'gif|jpg|png'; 
     $config['max_size'] = '1000000'; 
     $config['max_width'] = '10240'; 
     $config['max_height'] = '7680'; 

     $this->load->library('upload', $config); 
     if (!$this->upload->do_upload('userfile')) {       
      $error = array('error' => $this->upload->display_errors());  
      echo "error!"; 
      echo "<pre>"; 
      print_r($error); 
      echo "<pre/>"; 
     } else { 
      echo "done!"; 
     } 
    } 

} 

但它給了我一個錯誤說:「你沒有選擇一個文件上傳。 「;沒有AJAX它工作正常,可能是我的AJAX調用是不正確的,你能不能請讓我知道如果我做錯了什麼

感謝

+0

你從哪裏得到這些領域: - 'secureuri','fileElementId'? – Musa

+0

此外,您還必須使用XHR2通過Ajax上傳文件。 – Musa

+0

我發現他們在另一個例子!所以如果fileElementId不是傳遞給控制器​​的正確選擇,我可以選擇將文件傳遞給控制器​​嗎?謝謝 – user385729

回答

0

在我的非常新的項目,我用下面的代碼上傳文件!?與形式數據異步使用jquery ajax, 但是我無法上傳成功的文件:function()的jQuery,所以我用完成來處理服務器響應。您的數據在$ _Post &文件中變爲$ _FILES。

如果只想上傳文件。像明智一樣改變它。

希望這會幫助你。

也期待在本教程:http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

function frm_submit(){  
    var form = new FormData(document.getElementById('frmSample')); //frmSample is form id 
      var file = document.getElementById('userfile').files[0]; //userfile file tag id 
      if (file) { 
       form.append('userfile', file); 
      } 
     $.ajax({ 
       url: 'path/to/upload/script', 
       type: 'POST', 
       xhr: function() { // custom xhr 
       //progressHandlingFunction to hangle file progress 
        var myXhr = $.ajaxSettings.xhr(); 
        if (myXhr.upload) { // check if upload property exists 
         myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // for handling the progress of the upload 
        } 
        return myXhr; 
       }, 
       data: form, 
       cache: false, 
       contentType: false, //must 
       processData: false, //must 
       complete: function(XMLHttpRequest) { 
        var data = JSON.parse(XMLHttpRequest.responseText); 
        console.log(data); 
         console.log('complete'); 
       }, 
       error: function() { 
        console.log('error'); 
       } 
      }).done(function() { 
        console.log('Done Sending messages');  
      }).fail(function() { 
      console.log('message sending failed'); 
      }); 
}//function frm_submit ends here 
0

我用這個JavaScript庫 https://github.com/blueimp/jQuery-File-Upload 並得到了文件上傳與阿賈克斯的工作 - 拖/放+進度條,並返回相應的文件圖標或圖像的縮略圖那可以馬上下載。要完全工作和抽象是相當困難的,所以同一個例程處理多種類型的上傳,每個上傳都有自己的限制。 該鏈接會給出一些基本的示例代碼,值得一看。

皮特

相關問題