将文件从输入文件传输到php后端

时间:2017-12-01 19:03:58

标签: javascript php jquery html upload

尝试使用简单的方法将图像上传到后端服务器,仅使用javascript和PHP(无AJAX)。我决定尝试将输入中的.files [0]数据附加到FormData,以便通过POST发送它。

我不想使用提交表单,而是更倾向于使用httpRequest来获取通过/失败消息,因为在上传图像/文件后,要在同一页面上完成其他操作。

如果可能的话,有人可以通过httpRequest参数向我指出发送数据对象的方法。一旦它到达后端,我可以很好地操作它,但我找不到通过非AJAX方法发送它的方法。

HTML:

File Location: <br>
<input type='File' name='addNewMediaFileLocation' id='addNewMediaFileLocation' class='addFileText'><br>
Media Type: <select id='addFileFromLocalTypeSelect' class='addFileSelect>
 <option>....</option></select>
<input type='button' class='profileButton' id='addMediaFromLocalButton' value='Upload' onclick="uploadMediaFromLocal('$ComicName', '$alias');"

JAVASCRIPT 编辑 - 添加了getxml()

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

function uploadMediaFromLocal(ComicName, UploadedBy)
{
var Type = document.getElementById("addFileFromLocalTypeSelect").value;
var file = document.getElementById('addNewMediaFileLocation').files[0];
var fd = new FormData();
fd.append("uploadedFile", file);

xmlhttp = getxml();
xmlhttp.open("POST", "php/actions.php?F=addMediaFromLocal" + "&Type="+Type, true);
xmlhttp.onreadystatechange = function()
{
    if(xmlhttp.readyState == XMLHttpRequest.DONE)
        var response = xmlhttp.responseText;
        if(response == 'Success')
        {
            document.getElementById("uploadMSG").innerHTML='Image upload successful';
            document.getElementById("addNewMediaFileLocation").value="";
            document.getElementById("addMediaDescriptionForLocalText").value="";
        }
        else
        {
            document.getElementById("uploadMSG").innerHTML=response;
        }
}
xmlhttp.send(fd);
}

PHP

if($function == 'addMediaFromLocal')
{
$AddSuccess = true;
$AddError ='File not uploaded.';
$MediaType = $_REQUEST['Type'];
$FileType = $_FILES['uploadedFile']['type'];
$FileName = $_FILES['uploadedFile']['name'];
$FileContent = file_get_contents($_FILES['uploadedFile']['tmp_name']);

 ....VALIDATE INFO...
if($AddSuccess) 
{
    //check success
    if(move_uploaded_file("../media/$name",$FileContent) )
    {
        print("Succes");
    }
    else 
    {
        print($AddError. "Image upload unsuccessful, please check your folder permission<br>");
    }
}
else
{
    print($AddError);
}

}

ERROR:

E_NOTICE Error in file �actions.php� at line 1036: Undefined index: uploadedFile

0 个答案:

没有答案