php - （输入 [type='file']）值在提交表单后未显示

Question

我有一个表单input[type='text']，input[type='reset']在提交表单后价值正在获得，但input[type='file']在我提交表单时价值没有获得。我正在使用 AJAX 与 jQuery 和 PHP 来提交数据。请分享你的答案。

我尝试了很多代码，但没有得到任何答案：

 <form  method="post" enctype="multipart/form-data" id="insert-form">

      <input type="text" name="name" id="name">

      <input type="text" name="text" id="text">

      <input type="file" name="logo" id="logo">

     <input type="submit" name="submit" id="submit">
 </form>   



   <script>  
     $(document).ready(function(){  
     $('#add').click(function(){  
       $('#submit').val("submit");  
       $('#insert_form')[0].reset();  
     });  
 /*----------------------------------------------------------------------------*/
  $(document).on('click', '.edit_data', function(){  
       var employee_id = $(this).attr("id");  
       $.ajax({  
            url:"fetch.php",  
            method:"POST",  
            data:{employee_id:employee_id},  
            dataType:"json",  
            success:function(data){  
                 $('#name').val(data.name);   
                 $('#text').val(data.text);  
         $('#logo').val(data.logo);             
                 $('#submit').val("Update");  
                 $('#exampleModal2').modal('show');  
            }  
       });  
  });  

      $('#insert_form').on("submit", function(event){  
            event.preventDefault();  
             if($('#name').val() == '')  
         {  
             $('#name').val('empty');  
         }    
         else if($('#text').val() == '')  
          {  
             $('#text').val('');   
           }  

   else if($('#logo').val() == '')  
       {  
            alert("logo is required");  
       }    
       else  
       {  
            $.ajax({  
                 url:"insert.php",  
                 method:"POST",  
                 data:$('#insert_form').serialize(),  
                 beforeSend:function(){  
                      $('#submit').val("Inserting");  
                 },  
                 success:function(data){  
                      $('#insert_form')[0].reset();  
                      $('#exampleModal2').modal('hide');  
                      $('#employee_table').html(data);  
                 }  
            });  
       }  
  }); 
</script>

inset.php是 PHP 代码的另一个页面。

标签： phpjqueryajax

Answer 1

如果要contentType: false, processData: false使用 ajax 发送文件，则必须在 ajax 中使用。

HTML 代码

<form name="f1" method="post" id="f1">
    <table>
        <tr><td>Name</td></tr>
        <tr><td><input type="text" name="name" class="name"></td></tr>

        <tr><td>address</td></tr>
        <tr><td><input type="text" name="add" class="add"></td></tr>

        <tr><td>Number</td></tr>
        <tr><td><input type="text" name="num" class="num"></td></tr>

        <tr><td>Photo</td></tr>
        <tr><td><input type="file" name="photo" id="photo" multiple="multiple"> <img src="" id="photo_preview" height="300px;" width="300px;" style="display: none"></td></tr>

        <tr><td>Hobby</td></tr>
        <tr>
            <td>Cricket<input type="checkbox" name="chk[]" value="Cricket" class="Cricket">
            FootBall<input type="checkbox" name="chk[]" value="FootBall" class=" ">
            Reading<input type="checkbox" name="chk[]" value="Reading" class="Reading"></td>
        </tr>

        <tr><td>Gender</td></tr>

        <tr>
            <td>Male<input type="radio" name="gender" value="Male" class="Male">
            FeMale<input type="radio" name="gender" value="Female" class="FeMale"></td>         
        </tr>

        <tr><td><input type="button" name="" class="btn-add" value="Submit"></td></tr>
    </table>
</form>

阿贾克斯调用

$(".btn-add").click(function(){
        var formData = new FormData();
        formData.append('photo', $('#photo')[0]);
        var other_data = $('#f1').serializeArray();
        $.each(other_data, function (key, input) {
                       formData.append(input.name, input.value);
        });
        $.ajax({
            type:'POST',
            url:'index.php/emp/post_form_data',
            contentType: false,
            processData: false,
            data:formData,
            success:function(data){             

            }
        })
    });