douxu0550
douxu0550
2015-11-17 15:59

通过ajax post将文件与表单数据一起发送

I'm trying to upload a file via ajax together with some fields in a form. However, it doesn't work. I get this error.

Undefined Index :- File

Here's my 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";
}

What am I missing here?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • doulu4534 doulu4534 6年前

    Can you try using 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;
    });
    

    The above is a sample code, but you may use it to modify it.

    点赞 评论 复制链接分享
  • douchao1864 douchao1864 4年前

    We need to acknowledge first is that we need to APPEND both Form Input Data and Form File(s) into a single FormData variable.

    Here is my solution in which I have enabled Multi File option so that this solution can fit for all examples.

    It is Important to include name attribute in the input controls to make it work properly on server side in most of cases. If you are using C# then you can use simply Request.Form["nameAttribute"] to simply get the function. It is similar for Java and other languages.

    My Sample Code is

       $(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>

    For a working example (asp.net C# with handlers) you can visit sample code on https://github.com/vibs2006/HttpFileHandlerFormDataSample

    </div>
    
    点赞 评论 复制链接分享
  • dragon0023 dragon0023 6年前

    you can use 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>

    </div>
    
    点赞 评论 复制链接分享

相关推荐