2

早上好，

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

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

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

一般信息
浏览器：Chrome 版本 26.0.1410.64 m
wamp server (php, mysql)
Bootstrap for layout

代码
索引：

<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 文件会做更多的事情，但我现在只是想让文件上传。

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

4

2 回答 2

0

抱歉 - 您无法通过 ajax 请求上传文件。您必须获得一点创意并使用隐藏的 iframe 提交。这通常涉及创建一个新的隐藏表单，将文件控件克隆（或在 IE 的情况下移动）到隐藏表单，并将新表单附加到隐藏的 iframe。iframe 的 post 方法与您要发送文件的 URL 挂钩。您可以通过创建/克隆将作为查询字符串的一部分发送到 URL 的文本框来包含与文件一起使用的变量。
在客户端，在提交表单后创建一个计时器事件，该事件将检查 javascript 变量（在提交表单之前清除 var）。在服务器端，通过响应对象向下发送 javascript 以设置客户端 var。这样您就可以知道文件上传已完成。该过程相当复杂 - 特别是在使用 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');
});
于 2013-05-03T13:14:28.110 回答
0

我知道已经有一段时间了，但我找到了解决问题的方法。老实说，当我使用 jQuery 表单插件并注意到 $_FILES[] 实际上是与 $_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。我还使用引导按钮将提交按钮更改为加载状态，以防止人们在上传大文件时多次单击。成功回调将保存按钮恢复为其原始状态，以便他们可以再次提交表单。这也支持多个文件。

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

于 2013-06-13T10:58:45.083 回答