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

【问题标题】：How to submit a form with input image into modal Bootstrap?如何将带有输入图像的表单提交到模态 Bootstrap？
【发布时间】：2015-12-08 02:47:16
【问题描述】：

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

我使用 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>

编辑：

插入.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);
     }
 ...

如何更改此设置并上传包含表单中所有数据的图片？

【问题讨论】：

您是否对 $_FILES 超全局变量进行了 var_dump 以查看它得到了什么？如果temp 为空，您可能会遇到目录权限问题。
您有一个名为insert.php 的脚本吗？如果是这样，请告诉我们。如果没有，那么你需要写一个。
对不起，我忘记了，我已经编辑并显示了这个。谢谢！！

标签： javascript php jquery forms twitter-bootstrap

【解决方案1】：

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

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

否则请通读此讨论，How can I upload files asynchronously?。

【讨论】：