Question

我使用modal form bootstrap。表单包含一些文本输入和图像输入。

我使用ajax提交表单，并且正确地在PHP文件中接收所有数据。唉，图像没有上传。

我的代码问题是什么？

<script>
    $(document).ready(function () {
        $("input#submit").click(function(){
            $.ajax({
                type: "POST",
                url: "insert.php", 
                data: $('form.contact').serialize(),             
                success: function(msg){
                    $("#th").html(msg)                 
                    $("#form-content").modal('hide');  
                    $("#pro").html(content);
                },
                error: function(){
                    alert("failure");
                }
            });
        });
    });
</script>

表格：

 <form class="contact" name="contact" enctype="multipart/form-data">

      <label for="inputNombre" class="sr-only">Título</label>
      <input id="inputNombre" name="inputNombre" class="form-control" placeholder="Título" required="TRUE" autofocus="" type="text">
      <br> 
       ....
      <div class="upload_pic1 inline">
           <input id="imagen" name="imagen" type="file">
      </div>
 <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Cerrar</a>
    <input id="submit" class="btn btn-success" type="submit" value="Crear">
    </div>
    </div>

    </form>

修改

insert.php

 <?php

session_start();
if (!isset($_SESSION["name"]) && $_SESSION["name"] == "") {
    // user already logged in the site
    header("location: Login.html");
}  

require_once('funt.php');
conectar('localhost', 'root', '', 'db');

if (isset($_POST['inputNombre'])) {
    $nombre = strip_tags($_POST['inputNombre']);
    ....
    //Here the var imagen     
    if(is_uploaded_file($_FILES['imagen']['tmp_name'])){
        $rutaEnServidor='imagenes';
        $rutaTemporal=$_FILES['imagen']['tmp_name'];
        $nombreImagen=$_FILES['imagen']['name'];
        $rutaDestino=$rutaEnServidor.'/'.$nombreImagen;
        move_uploaded_file($rutaTemporal,$rutaDestino);
    } else {   //Always enter here, so is not uploaded
         $rutaEnServidor='imagenes';
         $rutaTemporal='/noPicture.png';
         $rutaDestino=$rutaEnServidor.'/noPicture.png';
         move_uploaded_file($rutaTemporal,$rutaDestino);
     }
 ...

如何更改此内容并使用表单中的所有数据上传图片？

Answer 1

您可以使用FormData interface。然后你必须告诉jQuery不要设置内容类型，也不要处理数据。

首先检查FormData构造函数的兼容性表。这可能就足够了。

否则请仔细阅读此讨论How can I upload files asynchronously?。

如何将带有输入图像的表单提交到模态Bootstrap中？

1 个答案: