php - Jquery XMLHttpRequest 不调用 url

Question

早上好

我到处搜索，但没有找到问题的答案。我想使用 jquery，但尝试使用“常规”Javascript 但收效甚微。

目标
我想通过 ajax(异步)将文件(只有一个)上传到将使用文件 (txt) 的 php 服务器。

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

一般信息
浏览器:Chrome 版本 26.0.1410.64 m
wamp 服务器 (php, mysql)
布局 Bootstrap

代码
索引:

<div class="span12" id="upload_form_div" style="display: block;">
    <form id="upload_form" enctype="multipart/form-data" class="upload_form">
        <fieldset>
            <legend>
                Please select a file to parse and merge with the database.
            </legend>
            <p>
                <label for="files">File:</label>
                <input type="file" class="text" id="files" name="file">
            </p>
            <p>
                <input type="button" value="Start Parse">
            </p>
        </fieldset>
    </form>
</div>

我包括了 jquery.js、app.js(用于上传的脚本文件)和 bootstrap.min.js。只是认为没有必要显示完整的 html 标记。

脚本文件:

$(function(){
$("#progressbar").hide();
});


function showProgress(evt) {
if (evt.lengthComputable) {
    var percentComplete = (evt.loaded / evt.total) * 100;
    $('#progressbar').progressbar("option", "value", percentComplete );
}
}

$(':button').click(function(){
var fileIn = $("#files")[0];
//Has any file been selected yet?
if (fileIn.files === undefined || fileIn.files.length == 0) {
    alert("Please select a file");
    return;
}

//We will upload only one file
var file = fileIn.files[0];
console.log(file);
//Show the progress bar
$("#progressbar").show();


$.ajax({
    url: 'process.php',  //server script to process data
    type: 'POST',
    data: file,
    contentType: file.type,
    processData: false,
    success: function(){
        $("#progressbar").hide();
    },
    error: function(){
        $("#progressbar").hide();
        alert("Failed");
        //alert(xhr.responseText);
    },
    xhr: function() {  // custom xhr
        myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload){ // check if upload property exists
            //myXhr.upload.addEventListener('progress',showProgress, false); // for handling the progress of the upload
            //console.log($.ajaxSettings.xhr().upload);
            console.log(myXhr.responseText);
        } else {
            console.log("Upload progress is not supported.");
        }

        return myXhr;
    }
});
});

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

PHP

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

php 文件会做更多的事情，但此时我只是想让文件上传。

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

Answer 1

抱歉 - 您无法通过 ajax 请求上传文件。您必须发挥一点创意，并在提交时使用隐藏的 iframe。这通常涉及创建一个新的隐藏表单，将文件控件克隆(或在 IE 的情况下移动)到隐藏表单中，并将新表单附加到隐藏的 iframe。 iframe 的 post 方法 Hook 到您要将文件发送到的位置的 URL。您可以通过创建/克隆将作为查询字符串的一部分发送到 URL 的文本框来包含与文件一起使用的变量。
在客户端，在提交表单后创建一个计时器事件，该事件将检查 javascript 变量(在提交表单之前清除 var)。在服务器端，通过响应对象向下发送 javascript 以设置客户端 var。这是您将知道文件上传完成的方式。这个过程相当复杂 - 特别是在使用 IE 时，您需要将文件控件移回您移动它的位置，并创建一个“虚拟”文件控件来 stub 它。您可能需要查看一些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');
});