jQuery+ajax文件上传失败，啥原因

Posted 2023-04-27

参考技术A 可能文件类型被限制，可能请求地址不匹配，可能文件大小被限制，可能服务器端错误。。
你得把报错信息发出来，不然没法分析本回答被提问者采纳 参考技术B 我现在用的就是这个，报这个错误。我现在用的就是这个，报这个错误。要引入jQuery的js，然后引入Ajaxfileupload.js这个js顺序不能颠倒。我估计是你jQuery的js顺序放错了！！也可以传xml格式的，我在公司电脑是好的，回家个人电脑上就不行了。。。苦恼啊，你直接data: "abc"传字符串也可以的。。。data:"abc"到后台，怎么取出abc的内容？长见识了，谢谢啊 o(^▽^)o 参考技术C 设置不对。

var data = new FormData();
data.append('file', $('input[type=file]')[0].files[0]);
$.ajax(
url: 'ajax.php',
data: data,
processData: false,
type: 'POST'
contentType: 'multipart/form-data',
mimeType: 'multipart/form-data',
success: function (data)
alert(data);

);

Codeigniter 图片上传使用 jquery 和 ajax 错误 [重复]

【中文标题】Codeigniter 图片上传使用 jquery 和 ajax 错误 [重复]

【英文标题】：Codeigniter Image upload using jquery and ajax error [duplicate]

【发布时间】：2018-04-03 19:21:03

【问题描述】：

我需要有关以下查询的指导。 我正在尝试上传文件或将文件移动到所需的目录，但它失败了。在表单上，​​除了 input['file'] 数据之外，所有其他字段数据都传递给控制器​​。 请通过以下代码。 查看： 使用 Bootstrap Modal 显示表单，只发布最少的代码

<form method="post" action="<?php //echo base_url().'admin/students/update_accomodation'; ?>" id="accform" enctype="multipart/form-data">
        <div class="form-group">
            <div class="row">
                    <div class="col-md-2">
                        <label>Students</label>
                    </div>
                    <div class="col-md-4">
                        <input type="text" name="student" value="" />
                    </div>  
                    <div class="col-md-2">
                        <label>Room</label>
                    </div>
                    <div class="col-md-4">
                        <input type="text" name="room" value="" />
                    </div>
            </div>      
        </div>
        <div class="form-group">
            <div class="row">
                    <div class="col-md-2">
                        <label>Stay</label>
                    </div>
                    <div class="col-md-4">
                        <select name="stay" class="form-control" id="stay">
                            <option value="1">1 Month</option>
                            <option value="2">2 Month</option>
                            <option value="3">3 Month</option>
                            <option value="4">4 Month</option>
                            <option value="5">5 Month</option>
                            <option value="6">6 Month</option>
                            <option value="7">7 Month</option>
                            <option value="8">8 Month</option>
                            <option value="9">9 Month</option>
                            <option value="10">10 Month</option>
                            <option value="11">11 Month</option>
                            <option value="12">12 Month</option>
                            <option value="18">18 Month</option>
                            <option value="24">24 Month</option>
                            <option value="36">36 Month</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label>Upload PDF</label>
                    </div>
                    <div class="col-md-4">
                        <input type="file" name="file" id="file" class="btn btn-default btn-file" />
                    </div>
            </div>  
        </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary accomodation">Submit</button>
  </div>
    </form>

阿贾克斯 在同一页面和页脚中，jquery.js 文件正在完美加载，并且文件以外的字段数据也传递给控制器​​。

<script>
$(document).ready(function()  
    $(".accomodation").click(function(event)  
        event.preventDefault();
        //var formData = $('#accform').serialize();
       // var formData = new FormData($(this)[0]);
        //var formData = $('#accform').formSerialize();
        //console.log(formData);
        //alert(JSON.stringify(formData));
        $.ajax(
            type: "POST",
            url: "<?php echo site_url('admin/students/update_accomodation'); ?>",
            data: $('#accform').serialize(),
            //data: new FormData($("#accform")[0]),
            processData: false,
            success: function(res)  
                //var json = JSON.parse(res);
                var parsed = res;
                console.log(parsed);
                if(parsed.status_code == 1) 
                    alert('data inserted successfully');
                    window.location.href = "<?php echo site_url('admin/bookings'); ?>";
                else 
                    alert(parsed.status);
                
            

        );
    );       
);

控制器

function update_accomodation()  
    //form input validation
    $this->form_validation->set_rules('student_id','Student ID','trim|required');
    $this->form_validation->set_rules('room_id','Room ID','trim|required');
    $this->form_validation->set_rules('stay','stay','required');
    if (empty($_FILES['file']['name']))                         //check file is selected
        $this->form_validation->set_rules('file','File','required');
    
    if($this->form_validation->run() == FALSE)                 //form validation false
        $data = array(
            'status' => validation_errors(),
            'status_code' => 2
        );
        echo json_encode($data);
       else              
        //echo json_encode(array('data' => $_FILES['file']['name']));
        //form validation true
        if (0 < $_FILES['file']['error']) 
            $data = array(
                'status' => 'File uploading error',
                'status_code' => 3
            );
            echo json_encode($data);
       else    
            $sourcePath = $_FILES['file']['tmp_name'];          //filename="file" 
            $targetPath = "uploads/students/contracts/".rand(0,10000).$_FILES['file']['name'];      //targetpath with random number as prefix
            move_uploaded_file($sourcePath,$targetPath);                                //move file to target folder
            $data1 = array(                                             //take inputs
                'stay' => $this->input->post('firstname'),
                'id_upload' => $targetPath
            );
            $data = array(
                'status' => 'upload successfully',
                'status_code' => 1
            );
            echo json_encode($data);
    

我遇到了什么错误： 1) input['file'] 值没有被传递，只有 input['text'] 和其他值被传递。 2) 输入['file'] 的表单验证错误（因为文件值未通过而关闭）。

到目前为止我做了什么： 1）我尝试了多种类型来接受表单数据，我用ajax评论它。 2) 我试过 jquery.form.min.js 插件（链接：http://malsup.com/jquery/form/）。使用此插件后，输入 ['file'] 值可以得到接受（在控制台中跟踪）但未传递给控制器​​，得到错误未定义变量：文件。 3) ProcessData: false, contentType: false, 也使用。 4) enctype="multipart/form-data" 也包括在内。

最后一件事 上面的代码在另一个控制器上完美运行并在现有项目中查看，我复制了相同的代码，但它不适用于当前控制器。需要帮助，谢谢。

用户建议的更新 AJAX 代码：但它对我不起作用，因为 null 值会传递给控制器​​

<script>
$(document).ready(function()  
    $(".accomodation").click(function(e)  
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax(
            type: "POST",
            url: "<?php echo site_url('admin/students/update_accomodation'); ?>",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(res)  
                console.log(res);
            

        );
    );       
);

接受更正的答案 以下回答对我有用，非常感谢。

var form = $('#accform');
var formData = new FormData(form[0]);

相反

var formData = new FormData(this);

【问题讨论】：

@ADyson ：嗨，我已经检查了上面的解决方案，但它对我不起作用，在查看代码后有任何其他建议，因为上面的代码正在另一个控制器和视图上工作。谢谢。

为什么它不适合你呢？从赞成票的数量及其“受保护”状态来看，它显然适用于许多其他人。您是否有一些特殊的额外情况使您的问题与众不同？我看不到控制器和视图有什么影响，这只是改变了 URL - 你认为这对过程有什么影响？

在您上面的代码中，您忘记设置 contentType 选项，这是最明显的错误，可能还有其他错误，但您应该从那里开始。

@ADyson ：我不知道为什么它对我不起作用，这就是我粘贴所有代码的原因，如果你能看到我提到我尝试了 processData: false 和其他东西，您认为是否有其他文件对 jquery 之类的代码有影响？

【参考方案1】：

.serialize() 不能接受使用 Jquery 和 Axaj 上传文件。

为了实现这个使用

$(document).ready(function (e) 
    $('.accomodation').on('submit',(function(e) 
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax(
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data)
                console.log("success");
                console.log(data);
            ,
            error: function(data)
                console.log("error");
                console.log(data);
            
        );
    ));
  ));

【讨论】：

嗨，我之前也试过这个代码，没有用，现在所有字段都需要验证错误，这意味着所有表单字段数据都没有传递给控制器​​，请您对此提出建议，谢谢。

我也根据您的建议更新了问题，请检查是否有问题，谢谢。

您遇到了什么错误？

在控制台中我看不到任何东西被传递，我的意思是调用正确地传递给控制器​​，但没有任何东西被传递 "fields":[]

使用->数据：formData，