Php Jquery XMLHttpRequest未调用url

早上好

我到处寻找我问题的答案，但运气不佳。我想使用jquery，但尝试了“常规”Javascript，但收效甚微

目标
我想通过ajax（异步）将一个文件（仅一个）上传到php服务器，该服务器将使用该文件（txt）

问题
脚本不会调用php脚本，文件也不会上载。没有javascript错误，脚本运行正常。在chrome中，process.php不会出现在网络部分，因此我不确定它是来自脚本还是php中的错误

一般信息
浏览器：Chrome版本26.0.1410.64 m
wamp服务器（php、mysql）
布局引导

代码
索引：

这是直接复制粘贴，所以我注释掉了一些故障排除行。

PHP

php文件将做更多的工作，但我只是想在这一点上上传文件。

---

如果有人需要更多信息，请告诉我，我会尽力提供信息。

对不起，您不能通过ajax请求上传文件。你必须有点创意，使用一个隐藏的iframe和一个submit。这通常涉及创建一个新的隐藏表单、将文件控件克隆（或在IE中移动）到隐藏表单中，以及将新表单附加到隐藏的iframe。iframe的post方法连接到要将文件发送到的URL。通过创建/克隆文本框，您可以将变量包含在文件中，这些文本框将作为查询字符串的一部分发送到URL。
在客户端，在提交表单后创建一个计时器事件，该事件将检查javascript变量（在提交表单之前清除变量）。在服务器端，通过response对象向下发送javascript以设置客户端变量。这就是您将知道文件上载完成的方式。这个过程相当复杂-尤其是在使用IE时，您需要将文件控件移回原来的位置，以及创建一个“虚拟”文件控件以将其存根。您可能想看看一些jQuery文件上传插件。。。 下面是一些代码，让您开始使用iframe方法：

jQuery('#btn5Submit').click(function() {
    //create a temporary form with the fileboxes on it, then attach to the end of the html form (to avoid nested form tags)
    var wkForm = jQuery('<form id="tmpFileUpload" method="POST" action="filehandler.ashx" encType="multipart/form-data" target="uploadResult" class="ctlHidden"></form>');
    for (var i = 1; i < 4; i++) {
        var wkFile = jQuery('#file5Upload' + i);
        if (wkFile.val() != '' && wkFile.length != 0) {
            jQuery('<img src="Styles/Images/loading.gif" id="' + 'img5File' + i + '" />').insertAfter(wkFile);
            wkForm.append(wkFile);
        }
        else {
            //user did not provide a file, add a dummy file input to the temp form to maintain order
            wkForm.append('<input name="file5TUpload' + i + '" type="file"/>');
        }
    }
    jQuery('body').append(wkForm);
    jQuery('#tmpFileUpload').submit();
});

jQuery('.deleteFile').live('click', function() {
    editRow = jQuery(this).parent();
    var ddlog = jQuery('<div></div>');
    var btns = {};
    var gMsg = 'Are you sure you want to delete this file? (This will allow you to specify a new file, but the server file will not be replaced until "Send Files To Server" is pressed.)';
    ddlog.html(gMsg);
    var button1 = 'Delete File';
    var button2 = 'Cancel Deletion';
    btns[button1] = function() {
        var wkId = jQuery(editRow).attr('id');
        wkId = wkId.charAt(wkId.length - 1);
        jQuery('<input id="file5Upload' + wkId + '" name="file5Upload' + wkId + '" type="file" class="fileUpload" />').insertAfter(editRow);
        jQuery(editRow).remove();
        jQuery(this).dialog('close');
    };
    btns[button2] = function() {
        //Do not save changes, reset section control buttons, reset global var, reset initial_data values (Do not save changes)
        jQuery(this).dialog('close');
    };
    ddlog.dialog({ autoOpen: false, title: 'File Deletion Confirmation', resizable: false, modal: true, buttons: btns });
    ddlog.dialog('open');
});

jQuery（'#btn5Submit'）。单击（函数（）{
//创建一个带有文件框的临时表单，然后附加到html表单的末尾（以避免嵌套表单标记）
var wkForm=jQuery（“”）；
对于（变量i=1；i<4；i++）{
var wkFile=jQuery（'#file5Upload'+i）；
如果（wkFile.val（）！=''&&wkFile.length！=0）{
jQuery（“”）.insertAfter（wkFile）；
wkForm.append（wkFile）；
}
否则{
//用户未提供文件，请将虚拟文件输入添加到临时表单以维护订单
wkForm.append（“”）；
}
}
jQuery（'body'）.append（wkForm）；
jQuery（'#tmpFileUpload'）.submit（）；
});
jQuery（'.deleteFile'）.live（'click'，function（））{
editRow=jQuery（this.parent（）；
var ddlog=jQuery（“”）；
var btns={}；
var gMsg='是否确实要删除此文件？（这将允许您指定一个新文件，但在按下“将文件发送到服务器”之前，不会替换服务器文件。）；
html（gMsg）；
var button1=‘删除文件’；
var button2='取消删除'；
BTN[button1]=函数（）{
var wkId=jQuery（editRow）.attr（'id'）；
wkId=wkId.charAt（wkId.length-1）；
jQuery（“”）.insertAfter（editRow）；
jQuery（editRow.remove（）；
jQuery（this.dialog（'close'）；
};
BTN[按钮2]=函数（）{
//不保存更改、重置区段控制按钮、重置全局变量、重置初始数据值（不保存更改）
jQuery（this.dialog（'close'）；
};
对话框（{autoOpen:false，title:'文件删除确认'，可调整大小：false，modal:true，buttons:btns}）；
ddlog.dialog（“打开”）；
});

我知道已经有一段时间了，但我已经找到了解决问题的方法。老实说，当我使用jQuery表单插件时，我偶然发现$\u文件[]实际上是与$\u POST[]一起发送的。它甚至不需要XMLHttpRequest。下面是我的代码

Javascript

function saveForm(){
    $("#saveButton").button('loading');
    $("#MyForm").ajaxSubmit({
        url: 'save_script.php',
        type: 'post',
        success: function(responce){
            $("#saveButton").button('reset');
            rebuild_attachments();
        }
    });
};

注意，#saveButton是我单击以保存表单的按钮的id，#MyForm是我提交的表单的id。我还使用bootstrap按钮将submit按钮更改为加载状态，以防止人们在上传大型文件时多次单击。成功回调将“保存”按钮恢复为其原始状态，以便他们可以再次提交表单。这也支持多个文件

---

“rebuild_attachments（）”是我调用的一个函数，它发出另一个.ajax请求，用新项（如果有的话）重建位于表单中的div。我知道可能有更好的方法来处理这个问题，比如java脚本模板，但是这个方法现在对我来说很有效。

是一个jQuery ajaxForm插件，它可以满足您的需要。我自己也用过。非常好。谢谢，我最终使用了jQuery ajaxForm插件。我在下面发布了我的发现。我在这里看到了通过XMLHttpRequest2级API上传文件的教程。JQuery使用xhr创建新的XMLHttpRequest并进行上传。我知道这种方法并不适用于所有浏览器（jQuery ajax表单插件在遇到表单上的文件控件时使用iframe方法。还有一个选项涉及使用flash。请查看此链接以了解HTML5选项：

<?php
set_error_handler("E_ALL");
$upload_directory = "files/";
move_uploaded_file($_FILES['file']['tmp_name'], $upload_directory . $_FILES['file']['name']);
?>

jQuery('#btn5Submit').click(function() {
    //create a temporary form with the fileboxes on it, then attach to the end of the html form (to avoid nested form tags)
    var wkForm = jQuery('<form id="tmpFileUpload" method="POST" action="filehandler.ashx" encType="multipart/form-data" target="uploadResult" class="ctlHidden"></form>');
    for (var i = 1; i < 4; i++) {
        var wkFile = jQuery('#file5Upload' + i);
        if (wkFile.val() != '' && wkFile.length != 0) {
            jQuery('<img src="Styles/Images/loading.gif" id="' + 'img5File' + i + '" />').insertAfter(wkFile);
            wkForm.append(wkFile);
        }
        else {
            //user did not provide a file, add a dummy file input to the temp form to maintain order
            wkForm.append('<input name="file5TUpload' + i + '" type="file"/>');
        }
    }
    jQuery('body').append(wkForm);
    jQuery('#tmpFileUpload').submit();
});

jQuery('.deleteFile').live('click', function() {
    editRow = jQuery(this).parent();
    var ddlog = jQuery('<div></div>');
    var btns = {};
    var gMsg = 'Are you sure you want to delete this file? (This will allow you to specify a new file, but the server file will not be replaced until "Send Files To Server" is pressed.)';
    ddlog.html(gMsg);
    var button1 = 'Delete File';
    var button2 = 'Cancel Deletion';
    btns[button1] = function() {
        var wkId = jQuery(editRow).attr('id');
        wkId = wkId.charAt(wkId.length - 1);
        jQuery('<input id="file5Upload' + wkId + '" name="file5Upload' + wkId + '" type="file" class="fileUpload" />').insertAfter(editRow);
        jQuery(editRow).remove();
        jQuery(this).dialog('close');
    };
    btns[button2] = function() {
        //Do not save changes, reset section control buttons, reset global var, reset initial_data values (Do not save changes)
        jQuery(this).dialog('close');
    };
    ddlog.dialog({ autoOpen: false, title: 'File Deletion Confirmation', resizable: false, modal: true, buttons: btns });
    ddlog.dialog('open');
});

function saveForm(){
    $("#saveButton").button('loading');
    $("#MyForm").ajaxSubmit({
        url: 'save_script.php',
        type: 'post',
        success: function(responce){
            $("#saveButton").button('reset');
            rebuild_attachments();
        }
    });
};