使用jQuery阿贾克斯上载与FORMDATA文件和表格数据（） [英] Using jQuery ajax to upload file and form data with formData()

问题描述

我要上传与jQuery Ajax和PHP的使用forData（）与此code文件：

I want upload a file with jquery ajax and php using forData() with this code:

var data = new FormData();

data.append('image',document.getElementById('uFile').files[0]);
data.append('tag','saveDocument');
data.append('data',$('#saveDocument').serializeArray());

$.ajax({
    url: url,
    type: 'post',
    data: data,
    cache: false,
    contentType:false,
    dataType: 'json',
    processData: false,
    success: function (data) {
        setAlert("Documento guardado correctamente!",success);
    }, error: function() {
        setAlert("Ha ocurrido un error al guardar!",error);
    }
});
return false;

这行包含在我的表单字段中的所有数据：

This line contains all data of fields in my form:

data.append('data',$('#saveDocument').serializeArray());

但在PHP中，我不能访问这些数据，我想访问的形式插入一个表中的数据，你知道是什么问题？

But in PHP I can't access to that data and I want access to data of form to insert on a table, do you know what's the problem?

HTML表单

<form id="saveDocument" enctype="multipart/form-data" method="post">
<p><i>Todos los campos son requeridos!</i></p>
<p> 
    <input id="uName" class="uName span5" name="uName" type="text" placeholder="Nombre completo" required/>
</p>
<p> 
    <input id="uEmail" class="uEmail span5" name="uEmail" type="email" placeholder="E-mail" required/>
</p>
<p> 
    <select id="uDept" class="uDept span5" name="uDept" type="text" required>
        <option value="0">Seleccione departamento</option>
        <option value="1">Dirección</option>
        <option value="2">Recursos Humanos</option>
        <option value="3">Oficina</option>
    </select>
</p>
<p> 
    <input id="uIssue" class="uIssue span5" name="uIssue" type="text" placeholder="Asunto" required/>
</p>
<p>
    <textarea id="uComment" class="uComment" name="uComment" placeholder="Comentario (Máximo 30 caracteres)" required></textarea>
</p>
<p>
    <select id="uUrgency" class="uUrgency span5" name="uUrgency" type="text" required>
        <option value="0">Seleccione urgencia</option>
        <option value="1">Normal</option>
        <option value="2">Alta</option>
        <option value="3">Urgente</option>
    </select>
</p>
<p>
    <input id="uFile" class="uFile span5" name="uFile" type="file" required/>
    <input id="nameFile" class="nameFile span5" name="nameFile" type="text" placeholder="Click para seleccionar el archivo" onClick="$('.uFile').click();"/>
</p>
<p>
    <input class="btn btn-danger" type="reset" value="Limpiar"/>
    <input id="sendFile" class="btn btn-primary" type="submit" value="Guardar"/>
</p>

下面的图片是从镀铬的开发工具：

The below image is taken from developers tool of chrome:

推荐答案

您可以pretty的方便。看看这些文章：

You can pretty easy. Take a look at these posts:

• <一个href="http://stackoverflow.com/questions/15259632/upload-multiple-images-with-jquery-ajax-and-process-them-with-php/15327377#15327377">specially与演示
图片
• <一个href="http://stackoverflow.com/questions/12445784/ajax-multiple-upload-doenst-php-file-processing/17082156#17082156">just所有文件类型的上传与验证

• specially for images with demo
• just all file type uploads with validation

这篇关于使用jQuery阿贾克斯上载与FORMDATA文件和表格数据（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！