web-dev-qa-db-fra.com

Envoi du fichier avec les données du formulaire via ajax post

J'essaie de télécharger un fichier via ajax avec certains champs d'un formulaire. Mais ça ne marche pas. Je reçois cette erreur.

Index non défini: - Fichier

Voici mon code.

HTML 

    <!-- File Button --> 
    <div class="form-group">
    <label class="col-md-4 control-label" for="file">Upload Software / File</label>
    <div class="col-md-4">
    <input id="file" name="file" class="input-file" type="file">
    </div>
    </div>

<div class="form-group">
<label class="col-md-4 control-label" for="price">Price($)</label>  
<div class="col-md-4">
<input id="price" name="price" type="text" placeholder="Price" class="form-control input-md" required=""> 
</div>
</div>

Ajax

$("#add_product").click(function(e){
    e.preventDefault();
    product_name = $("product_name").val();
    //d = $("#add_new_product").serialize();
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: $("#add_new_product").serialize(),
        success: function(response)
        {
            //
            alert(response);

        }
    })
});

PHP 

if (0 < $_FILES['file']['error']) 
{
 echo ":!";
}
else 
{
echo "ASa";
}

Qu'est-ce que j'oublie ici?

javascriptphpjqueryajaxfile-upload
13
Akshay

Pouvez-vous essayer d'utiliser FormData():

$("form#files").submit(function(){

    var formData = new FormData($(this)[0]);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

Ce qui précède est un exemple de code, mais vous pouvez l'utiliser pour le modifier.

10
Praveen Kumar Purushothaman

vous pouvez utiliser FormData

$("#add_product").click(function(e){
    e.preventDefault();
    var fdata = new FormData()
    
   fdata.append("product_name",$("product_name").val());
  
    if($("#file")[0].files.length>0)
       fdata.append("file",$("#file")[0].files[0])
    //d = $("#add_new_product").serialize();
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data:fdata,
        contentType: false,
        processData: false, 
        success: function(response)
        {
            //
            alert(response);

        }
    })
});
 <!-- File Button --> 
    <div class="form-group">
    <label class="col-md-4 control-label" for="file">Upload Software / File</label>
    <div class="col-md-4">
    <input id="file" name="file" class="input-file" type="file">
    </div>
    </div>

<div class="form-group">
<label class="col-md-4 control-label" for="price">Price($)</label>  
<div class="col-md-4">
<input id="price" name="price" type="text" placeholder="Price" class="form-control input-md" required=""> 
</div>
</div>
9
Suhail Keyjani

Nous devons d'abord reconnaître que nous devons AJOUTER à la fois les données d'entrée de formulaire et les fichiers de formulaire dans une seule variable FormData .

Voici ma solution dans laquelle j'ai activé l'option Multi File afin que cette solution puisse s'adapter à tous les exemples.

C'est Important pour inclure l'attribut name dans les contrôles d'entrée pour le faire fonctionner correctement côté serveur dans la plupart des cas . Si vous utilisez C #, vous pouvez simplement utiliser Request.Form ["nameAttribute"] pour obtenir simplement la fonction. Il en est de même pour Java et d'autres langages.

Mon exemple de code est

   $(document).ready(function () //Setting up on Document to Ready Function
    {
        $("#btnUpload").click(function (event) {

            //getting form into Jquery Wrapper Instance to enable JQuery Functions on form                    
            var form = $("#myForm1");

            //Serializing all For Input Values (not files!) in an Array Collection so that we can iterate this collection later.
            var params = form.serializeArray();

            //Getting Files Collection
            var files = $("#File1")[0].files;

            //Declaring new Form Data Instance  
            var formData = new FormData();

            //Looping through uploaded files collection in case there is a Multi File Upload. This also works for single i.e simply remove MULTIPLE attribute from file control in HTML.  
            for (var i = 0; i < files.length; i++) {
                formData.append(files[i].name, files[i]);
            }
            //Now Looping the parameters for all form input fields and assigning them as Name Value pairs. 
            $(params).each(function (index, element) {
                formData.append(element.name, element.value);
            });

            //disabling Submit Button so that user cannot press Submit Multiple times
            var btn = $(this);
            btn.val("Uploading...");
            btn.prop("disabled", true);

            $.ajax({
                url: "Handler.ashx", //You can replace this with MVC/WebAPI/PHP/Java etc
                method: "post",
                data: formData,
                contentType: false,
                processData: false,
                success: function () {
                    //Firing event if File Upload is completed!  
                    alert("Upload Completed");
                    btn.prop("disabled", false);
                    btn.val("Submit");
                    $("#File1").val("");

                },
                error: function (error) { alert("Error"); }

            });

        });

    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form enctype="multipart/form-data" method="post" id="myForm1">
    <p><textarea id="TextArea1" rows="2" cols="20" name="TextArea1"></textarea></p>
    <p><input id="File1" type="file" multiple="multiple" /></p>
    <input id="btnUpload" type="button" value="Submit" />
    </form>

Pour un exemple de travail (asp.net C # avec des gestionnaires), vous pouvez visiter un exemple de code sur https://github.com/vibs2006/HttpFileHandlerFormDataSample

7
vibs2006