Question

我创建了一个用jquery ajax发送数据和文件的表单。这个代码分叉与firefox但上传在chrome和其他浏览器中不起作用。

这是我的代码： html

<form method="post" enctype="multipart/form-data" id="form_foto">
<table>
<tr>
    <td class="form_label">
        <label for="nome">Nome</label>
    </td>
    <td class="form_input">
        <input type="text" name="nome" value="" id="nome" />
    </td>
</tr>
<tr>
    <td class="form_label">
        <label for="cognome">Cognome</label>
    </td>
    <td class="form_input">
        <input type="text" name="cognome" value="" id="cognome" />
    </td>
</tr>
<tr>
    <td class="form_label">
        <label for="email">Email</label>
    </td>
    <td class="form_input">
        <input type="text" name="email" value="" id="email" />
    </td>
</tr>
<tr>
    <td class="form_label">
        <label for="personaggio">Personaggio</label>
    </td>
    <td class="form_input">
        <input type="text" name="personaggio" value="" id="personaggio" />
    </td>
</tr>
<tr>
    <td class="form_label">
        <label class="form_label_upload" for="file">UPLOAD FOTO</label>
    </td>
    <td class="form_input">
        <div class="porel">
    <span class="file-wrapper">
        <input type="file" name="file-0" id="file" />
        <span class="button"></span>
    </span>
        </div>
    </td>
</tr>
<tr>
<td colspan="2">
<div class="footer_dialog">
<p><input type="submit" id="submit_form" value="" /></p>

js代码：

(function ($) {
$.performAjaxSubmit = function() {

        var nome = document.getElementById("nome").value;
        var cognome = document.getElementById("cognome").value;
        var email = document.getElementById("email").value;
        var personaggio = document.getElementById("personaggio").value;
        var exist = document.getElementById("exist").value;
        var fb_id = document.getElementById("fb_id").value;
        var first_name = document.getElementById("first_name").value;
        var last_name = document.getElementById("last_name").value;

        emailExp = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i;

        if (nome.length == 0 ) {
            $("div.errore").html("Inserisci il nome");
            return false;
        }

        if (cognome.length == 0 ) {
            $("div.errore").html("Inserisci il cognome");
            return false;
        }

        if (personaggio.length == 0 ) {
            $("div.errore").html("Inserisci il personaggio");
            return false;
        }
        if (email.length == 0 || !emailExp.test(email) ) {
            $("div.errore").html("Inserisci l'email");
            return false;
        }

        var formdata = new FormData();
        formdata.append("nome", nome);
        formdata.append("cognome", cognome );
        formdata.append("email", email);
        formdata.append("personaggio", personaggio);

        var dim = $('input[type="file"]').length;
        for(j=0;j<dim;j++){
            $each($('input[type="file"]')[j].files, function(i, file) {
                formdata.append('file-'+j, file);
            });
        }


        var xhr = new XMLHttpRequest();
        xhr.open("POST","index.php/upload/index_upload", true);
        xhr.send(formdata);
        $("div#dialog_content").html("<img src='<?php echo base_url(); ?>asset/public/images/loading.gif'/>");
        xhr.onload = function(e) {
            if (this.status == 200) {
                $("div#dialog_content").html(this.responseText);
                //alert(this.responseText);
            }
            else{
                alert(this.responseText);
            }
        };
    };

适用于firefox，在chrome和safari上有问题。有什么想法吗？

如何使用ajax发送数据和文件？我从这篇文章中获取了代码

https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects#Creating_a_FormData_object_from_scratch

Answer 1

在Internet Explorer上通过“ajax”上传文件的唯一方法是使用iframe，而其他浏览器则支持通过ajax上传。您最好的方法是使用插件，如建议的那样。

就个人而言，我使用jQuery Form Plugin http://malsup.com/jquery/form/

上传文件和数据jQuery

1 个答案: