Question

我正在尝试执行可能无法完成的任务。我还没有在互联网上找到相同的场景。

我有四个字段，只需点击一下，就会调用一个Javascript函数来对PHP文件中的数据进行AJAX调用。

这些字段最终将在数据库中填充一行，PHP将查询新的数据集，用户将看到它。部分数据是用户可以单击并展开的图像。

AJAX调用有效，扩展图像可以正常工作，但是通过上传添加此图像不会，从而打破了整个过程。

以下是HTML表单的片段：

Entry: <input type='text' id='entry' />
Stop: <input type='text' id='stop' />
Final: <input type='text' id='final' />
Chart: <input type='file' id='chart' value='Get Chart'/>
<input type='button' onclick='addResult()' value='Add' />

addResult（）处理这样的事情：

var entry = document.getElementById('entry').value;
var stop = document.getElementById('stop').value;
var final = document.getElementById('final').value;
var chart = document.getElementById('chart').value;
var queryString = "?entry=" + entry + "&stop=" + stop + "&final=" + final + "&chart=" + chart + "&loggedIn=true";
ajaxRequest.open("GET", "addResult.php" + queryString, true);

没什么特别的，只需获取数据并将其发送到addResult.php以获取响应。以下是在addResult.php中处理“图表”上传数据的过程：

$chart = $_GET['chart'];
$chart_loc = "../img/".basename($_FILES[$chart]['name']);
move_uploaded_file($_FILES[$chart]['tmp_name'], $chart_loc);
if(($entry != "") && ($stop != "") && ($final != "") && ($chart_loc != "")){
           mysql_query("INSERT INTO resultsMod VALUES (now(),'".$entry."','".$stop."','".$final."','".$chart_loc."')") or die(mysql_error());
        }

当我点击“添加”按钮时，它什么也没做，在我添加上传文件字段之前，一切正常。所以我一定是在处理文件时做错了。

我以前从未使用过上传数据，因此我不知道是否允许发送那样的数据（没有表单提交，只是通过Javascript将文件数据传递到php文件）。我也可能使用move_uploaded_file函数做错了。

当然，目标是从表单中实时更新新数据，包括上传的图像。（我知道我的代码很简单，一旦这个功能正常，我会添加它）感谢任何帮助，谢谢！

Answer 1

您无法通过AJAX上传文件 - 只有解决方案是带有表单的iframe。

Answer 2

您正在尝试使用AJAX上传文件，这是不可能的。最好的方法是单独管理文件上传，可以通过swf-upload

Answer 3

无法通过AJAX上传文件。 XMLHttpRequest不支持此功能。你可以使用flash，也可以使用iframe作为目标。

Answer 4

您的表单是否有enctype="multipart/form-data"？文件上传必须具有<form>标记中的属性才能使上传工作。

同样，您不会检查服务器上的文件上传是否成功。至少你应该

if ($_FILES[$chart]['error'] === UPLOAD_ERR_OK) {
      ... upload worked, handle it...
}

Answer 5

需要检查的是，您的表单是enctype="multipart/form-data"吗？这会导致图像无法上传。只是一个想法。

另外，jQuery是一个选项吗？如果是这样，你可以这样做：

$.ajaxFileUpload({
        url:'addResult.php?type=' + queryString,
        secureuri:false,
        fileElementId: INPUTIDHERE,
        dataType: 'json',
        success: function (data, status)
        {
            // done - run some code
        },
        send: function(data)
        {
        },
        error: function (data, status, e)
        {
            console.debug(data);
        }
    }
)

需要这个库： http://jsfiddle.net/SYZqL/

Answer 6

帮自己一个忙，并使用Uploadify（需要jQuery）。它可以节省您花费数小时的时间来确定如何让您的上传以AJAX-ish方式运行。

Answer 7

you can upload the files via ajax to php script. The following should work for that.

var file_data = $("#file_field_id").prop("files")[0];
var form_data = new FormData();
form_data.append("file", file_data)
form_data.append("user_id", 123) // adding additional form field values
$.ajax({
                url: "server.php",
                dataType: 'script',
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,                         // Setting the data attribute of ajax with file_data
                type: 'post',
                success: function(data, textStatus, jqXHR){
                    if(data)
                     {
                        // some process


                },
                error:function(jqXHR, textStatus, errorThrown){
                alert("errorThrown"); 


        }
       });

使用AJAX和PHP脚本的HTML上传文件 - 帮助？

7 个答案: