通过ajax的javascript formdata

问题描述

我正在尝试通过AJAX和PHP上传文件.我有一个HTML表单，如下所示:

I am trying to upload a file via AJAX and PHP. I have a HTML form as below:

<form method="post" id="sectiononeform" name="sectiononeform" enctype="multipart/form-data">

    <div class="clearfix">
        <input type="text" name="customHeading1" id="customHeading1" class="span10" value=""/>
    </div>

    <!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
    <div class="clearfix">
        <textarea id="elm1" name="elm1" rows="15" class="xxlarge" cols="80" style="width: 80%">

        </textarea>
    </div>

    <div class="clearfix">
        <input type="file" name="file1" id="file1" class="span10" />
    </div>

    <div class="clearfix">
        <div class="actions">
            <input type="submit" id="saveSection1" name="saveSection1" value="Submit" />
            <input type="reset" name="resetSection1" value="Reset" />
        </div>
    </div>

</form>

我的jquery代码如下:

My jquery code is as follows:

$(document).ready(function(){
    $("#saveSection1").click(function(e){
        e.preventDefault();

        var formdata = false;

        /*function showUploadedItem (source) {
            var list = document.getElementById("image-list"),
                li   = document.createElement("li"),
                img  = document.createElement("img");
            img.src = source;
            li.appendChild(img);
            list.appendChild(li);
        }   */

        if (window.FormData) {
            formdata = new FormData();

            //document.getElementById("btn").style.display = "none";
        }

        var len = document.getElementById("file1").files.length, img, reader, file;

        for (var i = 0 ; i < len; i++ ) {
            file = document.getElementById("file1").files[i];
            if (!!file.type.match(/image.*/)) {
                if (window.FileReader ) {
                    reader = new FileReader();
                    /*reader.onloadend = function (e) {
                        showUploadedItem(e.target.result, file.fileName);
                    };*/
                    reader.readAsDataURL(file);
                }
                if (formdata) {
                    alert("form data");
                    formdata.append("customHeading1", document.getElementById("customHeading1").value);
                    formdata.append("elm1", document.getElementById("elm1").value);
                    formdata.append("custsection1", 1);
                    formdata.append("venue_id", document.getElementById("venue_id").value);
                    formdata.append("images[]", file);
                    alert(formdata);
                }
            }
        }
        var params = $("form#sectiononeform").serialize();
        //alert("params" + params);
        params = params + "&custsection1=1&venue_id=" + $("#venue_id").val() + "&formdata=" + formdata;
        //alert(params);
        $.ajax({
          type: 'POST',
          url: 'saveCustomSectionData.php',
          data: formdata,
          success: function(data){
            alert(data);
          }
        });
    });
});

我的问题是，当我不使用文件输入类型时，我可以序列化表单值并通过AJAX发送.由于我使用的是文件输入类型，因此我使用的是formdata并将信息附加到它.这是发送数据的正确方法.我没有收到来自php的任何响应，我也看不到firebug中的任何请求.相反，我收到一些模糊的错误，例如对WrappedNative原型对象进行非法操作".有什么建议吗?

My issue is that when I don't use the file input type, I can just serialize the form values and send it through AJAX. Since I am using file input type, I am using formdata and appending information to it. Is this the right way to send data. I am not getting any response back from php, neither can i see any request in firebug. Instead I get some vague error as "Illegal operation on WrappedNative prototype object". Any suggestions?

推荐答案

您可以使用AJAX发送文件.将new FormData()和$ .ajax方法与contentType:false，processData:false一起使用.

You can use AJAX to send files. Using new FormData() and the $.ajax method with contentType: false, processData: false.

检查一下:

<script type="text/javascript">
$(document).ready(function()
{
    $("#ajax").hide();

    $("#botonancho").click(function()
    {
        if ($("#ficherocsv").val() =="")
        {
            alert("   Seleccione 1º el archivo ");
        }
        else
        {
            var data = new FormData();
            data.append( 'file', $( '#ficherocsv' )[0].files[0] );

            $("#botonancho").val("Por favor... espere.");
            $("#ajax").html("<img src='imagenes/ajax-indicator.gif' alt='Indicador Actividade Ajax' />").show();

            $.ajax({
                url: 'importacion.php',
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function(data)
                {
                    $("#ajax").html("");

                    $("#ajax").html(data).fadeIn("slow",function()
                    {
                        $("#ajax").delay(1500).fadeOut("slow",function()
                        {
                            $("#botonancho").val("IMPORTAR Alumnos CSV (codificación UTF-8)");
                            $("#ficherocsv").val("");
                            $("#ajax").hide();

                        });
                    });
                }
            });
        }
    });

});
</script>

致谢.

这篇关于通过ajax的javascript formdata的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！