AJAX Codeigniter - 您没有选择要上传的文件（错误）- 如何通过 AJAX 传递文件答案

【问题标题】：AJAX Codeigniter - You did not select a file to upload(error)- How to pass the file through AJAXAJAX Codeigniter - 您没有选择要上传的文件（错误）- 如何通过 AJAX 传递文件
【发布时间】：2014-01-28 00:57:33
【问题描述】：

我正在尝试通过 AJAX 调用和 Codeigniter 上传图片：

我的观点：

            <?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 调用不正确！如果我做错了什么，请告诉我吗？

谢谢

【问题讨论】：

您从哪里获得这些字段：- secureuri、fileElementId？
另外你必须使用 XHR2 通过 Ajax 上传文件。
我在另一个例子中找到了它们！因此，如果 fileElementId 不是传递给控制器的正确选择，那么将文件传递给控制器的选项是什么？谢谢
你必须使用uploadify来上传文件。因为不能像这样在ajax中传递文件
感谢 Umair；所以除了 Uplodify 或任何其他插件之外，在我的情况下，我可以使用 AJAX 的唯一方法是使用 XHR？顺便说一句，我从来不知道我们不能使用 AJAX 上传文件......这很有趣......

标签： javascript php jquery ajax codeigniter

【解决方案1】：

在我最近的项目中，我使用以下代码使用 jquery ajax 异步上传带有 formdata 的文件，但是我无法成功上传文件：jQuery 的 function() 所以我用 complete 来处理服务器响应。你可以试试success:function()。

您将在 $_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

【讨论】：

【解决方案2】：

我使用了这个 javascript 库 https://github.com/blueimp/jQuery-File-Upload 并使用 ajax 进行文件上传 - 拖放 + 进度条，并返回可以立即下载的适当文件图标或图像缩略图。让它完全工作和抽象是相当困难的，所以同一个例程处理多种类型的上传，每种都有自己的限制。链接会给出一些基本的示例代码，值得一看。

皮特

【讨论】：