javascript formdata通過ajax

Question

我試圖通過AJAX和PHP上傳文件。 我有一個HTML表單如下：

<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代碼如下：

$(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原型對象上的非法操作”。 有什么建議么？

Answer 1

您可以使用AJAX發送文件。 使用new FormData（）和$ .ajax方法與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>

問候。

Answer 2

據我所知，由於安全原因，這是不可能的。

但是可以使用像jquery.form.js這樣的東西（可從http://jquery.malsup.com/form/獲得 ）並且很容易實現。

他們也為你提供了一些很好的例子。