使用javascript调用php通过html表单上传文件

时间：2014-05-27 11:15:14

标签： javascript php forms

我有一个HTML表单，我必须上传3个文件。 我必须在表单提交后调用create.js脚本，该脚本使用getElementById以所需方式格式化输入。然后，它使用xmlHTTPRequest来调用create.php，将表单数据插入mysql database，同时使用json_encode获取它发送回create.js的一些数据。
因此，我不使用form action属性，而是使用onClick按钮上的Submit属性来呼叫create.js。
但是我必须在点击提交时上传我的3个文件。我尝试使用$_FILE['file1']['name']和其他$_FILE[][]变量，我使用<input type="file" name="file1" id="file1">来上传我的第一个文件，但它出现以下错误： 未定义的索引： C：\ xampp \ htdocs \ mywebsite \ sites \ all \ themes \ danland \ create.php 中的文件1 77

那么如何将我的代码存储在我的服务器上的同一个php中，以便将xmlhttp.responseText返回到我的.js文件中？

我还尝试将我的上传代码放在upload.php中并使用<form action="the/correct/path/upload.php">调用它，除了在我的提交按钮中使用onClick = "my_create.js_function()"但它无法正常工作

请注意，我已阅读 html upload using ajax and php ，并知道我无法使用xmlhttprequest上传文件，但我并不是想这样做。我希望我的xmlhttprequest在点击提交后获取数据，我的提交按钮也可以存储我的文件。

我的HTML表单是：

<script src="http://localhost/mywebsite/sites/all/themes/danland/src/create.js">
</script>       
<script type="text/javascript" src="http://localhost/mywebsite/sites/all/themes/danland/src/datepickr.js"></script>

<script>
window.onload = create_new_project_getoptions(); 
</script>

<div class="searchinterfacecontainer">
<p id="my_first_para"></p>
<p id="this_is_my_new_para"></p>
<h2>Enter Details</h2>

<form id="create_projectform1" name="create_projectform1" method="POST" enctype="multipart/form-data" action="http://localhost/mywebsite/sites/all/themes/danland/create_new_project_upload.php">

<input type="text" name="project_id" id="project_id" required/>

<input type="text" name="project_name" id="project_name" required/>

<input id="project_start_date" onClick="new datepickr('project_start_date')" required/>

<select id="project_geography" name="project_geography">
<option value="">Select Country </option>
</select><br/>

<input type="file" name="file1" id="file1">

<input type="file" name="file2" id="file2">

<input type="file" name="file3" id="file3">

    <div class="searchinterfacebuttons"><input type="submit" class="searchinterfaceform1go" value="Search" onClick="create_new_project()"/>     <button class="searchinterfaceform1go" type="reset" value="Reset"> Reset  </button></div>
</form>
</div>

我的create.js：

function create_new_project( )
{
    alert("entered");
    var project_id = document.getElementById("project_id").value;
    var project_name = document.getElementById("project_name").value;
    var project_start_date = document.getElementById("project_start_date").value;
// some more getElementByID
    var error_para = document.getElementById("my_first_para");
    var my_error = "";
    error_para.innerHTML =  my_error;

    // some string manipulation with the above defined variables

    project_start_date = date_fixer(project_start_date);
    project_completion_date = date_fixer(project_completion_date);

    if (window.XMLHttpRequest)
    {   
        xmlhttp = new XMLHttpRequest(); 
    }
    else
    { 
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    }

    var params = "project_id=" + project_id + "&project_name=" + project_name ; // + some more parameters

    var url = "http://localhost/mywebsite/sites/all/themes/danland/create.php";
    xmlhttp.open("POST",url,true);

    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");

    xmlhttp.onreadystatechange=function()
    {        
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            var val = xmlhttp.responseText;
            //alert(val);
                    var jsonData = JSON.parse(val);
                    // some manipulation with json data
            var answer = document.getElementById("this_is_my_new_para");
            answer.innerHTML = jsonData;
        }
    }
    xmlhttp.send(params);
}

function date_fixer(my_date)
{
    // code here that works fine
}

我的create.php：

<?php

    define('DB_SERVER', 'localhost');
    define('DB_USERNAME', 'this_user');
    define('DB_PASSWORD', 'this_password');
    define('DB_DATABASE', 'mywebsite');

    $project_id = $_POST["project_id"];
    $project_name = $_POST["project_name"];
    $project_start_date = $_POST["project_start_date"];
        // some more $_POST[]

    $date_status1 = date_fixer($project_start_date);
    $date_status2 = date_fixer($project_completion_date);
    //echo "date status 1 is $date_status1 and date_status2 is $date_status2";
    if ( $date_status1 == -1 || $date_status2 == -1 )  // not a valid date
    {
        echo "The date was not in correct format. Please use the date picker";
    }
    else
    {
        try 
        {
            $db = new PDO('mysql:host=' .DB_SERVER . ';dbname=' . DB_DATABASE . ';charset=utf8', DB_USERNAME,  DB_PASSWORD);
            $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
            $query_geography = "INSERT into " . DB_TABLE . "( projectID, project_name, start_date) values ( (:pid), (:pname), (:sdate))";
            $parameters1 = array(':pid'=>$project_id, ':pname'=>$project_name, ':sdate'=>$project_start_date);
            $statement1 = $db->prepare($query_geography);
            $statement1->execute($parameters1);
        }
        catch(Exception $e) 
        {
            echo 'Exception -> ';
            var_dump($e->getMessage());
        }
    }

    function date_fixer($my_date)
    {
        // valid function that works fine
    }

    $allowedExts = array("gif", "jpeg", "jpg", "png");
    $temp = explode(".", $_FILES["file1"]["name"]);
    $extension = end($temp);
    print_r($temp);
    print_r($extension);


    if ( ( ($_FILES["file1"]["type"] == "image/gif") || ($_FILES["file1"]["type"] == "image/jpeg") || ($_FILES["file1"]["type"] == "image/jpg") || ($_FILES["file1"]["type"] == "image/pjpeg") || ($_FILES["file1"]["type"] == "image/x-png") || ($_FILES["file1"]["type"] == "image/png") ) && ($_FILES["file1"]["size"] < 20000) && in_array($extension, $allowedExts) ) 
    {
        if ($_FILES["file1"]["error"] > 0) 
        {
            echo "Return Code: " . $_FILES["file1"]["error"] . "<br>";
        } 
        else 
        {
            echo "Upload: " . $_FILES["file1"]["name"] . "<br>";
            echo "Type: " . $_FILES["file1"]["type"] . "<br>";
            echo "Size: " . ($_FILES["file1"]["size"] / 1024) . " kB<br>";
            echo "Temp file: " . $_FILES["file1"]["tmp_name"] . "<br>";
            if (file_exists("upload/" . $_FILES["file1"]["name"])) 
            {
                echo $_FILES["file1"]["name"] . " already exists. ";
            } 
            else 
            {
                move_uploaded_file($_FILES["file1"]["tmp_name"], "upload/" . $_FILES["project_file1"]["name"]);
                echo "Stored in: " . "upload/" . $_FILES["project_file1"]["name"];
            }
        }
    } 
    else 
    {
        echo "Invalid file";
    }

?>

1 个答案:

答案 0 :(得分：0)

要从$_FILE获取值，您必须将表单enctype设置为multipart/form-data。 如果你想读取文件字段的值，那么在jQuery中只需编写$('#id_filefield').val();

相关问题
最新问题