无法使用PHP&上传文件使用Javascript

时间:2017-05-05 14:12:05

标签: javascript php

file_upload_parser.php

<?php

var_dump($_FILES);

if (isset($_FILES['file'])) {
    var_dump($_FILES);

    $fileName = $_FILES["file"]["name"]; 
    $fileTmpLoc = $_FILES["file"]["tmp_name"]; 
    $fileType = $_FILES["file"]["type"]; 
    $fileSize = $_FILES["file"]["size"]; 
    $fileErrorMsg = $_FILES["file"]["error"]; 

    if (!$fileTmpLoc) { 
        echo "ERROR: Please browse for a file before clicking the upload button.";
        exit();
}

if(move_uploaded_file($fileTmpLoc, "uploads/$fileName")){
    echo "$fileName upload is complete";
} else {
    echo "move_uploaded_file function failed";
}
} else {
  echo "File not found.";
}

?>

使用Javascript:

function _(el){
   return document.getElementById(el);
}

function uploadFile() {
    var file = _("file").files[0];
    alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser.php");
    ajax.send(formdata);
}

function progressHandler(event){
     _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
     var percent = (event.loaded / event.total) * 100;
     _("progressBar").value = Math.round(percent);
     _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}

function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}

function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}

function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}

形式:

<form name="uploads" action="file_upload_parser.php" enctype="multipart/form-data" method="post" class="form-horizontal" id="_uploads">
  <div id="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Uploads</h3>
          </div>
          <div class="panel-body">
            <div class="form-group">
              <label class="col-sm-2 control-label" for="_file"> </label>
              <div class="col-sm-10">
                <input type="file" name="file" id="file">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="_button"> </label>
              <div class="col-sm-10">
                <button type="button" name="button" value="Upload File" class="btn btn-success" onclick="uploadFile()" id="_button">Upload File</button>
              </div>
            </div>

这就是我得到的:

enter image description here

我已经检查了我的php.ini文件以验证文件上传是否已打开且文件大小限制是否足够高但每次运行此代码时,$ _FILE始终为空。 FormData正在抓取文件并正确地输出名称,大小和类型到控制台,但是与file_upload_parser.php的通信正在进行。

我还确定了文件夹&amp;文件权限设置为完全访问权限。

有什么想法吗?

2 个答案:

答案 0 :(得分:1)

好的,我相信我发现了这个问题。我进入并修改了我的apache2文件夹中的httpd.conf文件:

#LoadModule php5_module libexec/apache2/libphp5.so

要:

LoadModule php5_module libexec/apache2/libphp5.so

执行此操作后,我的测试图像已正确移动。

答案 1 :(得分:0)

我找到了解决方案。

首先,您需要更改html

<!DOCTYPE html>
<html>
<body>
<script src="demo_script_src.js">
</script>

<form name="uploads" action="/testing/file_upload_parser.php" enctype="multipart/form-data" method="post" class="form-horizontal" id="_uploads">
  <div id="container">
    <div class="row">
  <div class="col-sm-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Uploads</h3>
      </div>
      <div class="panel-body">
        <div class="form-group">
          <label class="col-sm-2 control-label" for="_file">File Upload </label>
          <div class="col-sm-10">
            <input type="file" name="file" id="file">
          </div>
        </div>           

       </div>
       </div>
      </div>
   </div>
 </div>
 <button type ="submit" class="btn btn-success pull-right">Submit</button>
</form>         

</body>
</html>

我在public_html下使用了testing文件夹,这就是为什么action="/testing/file_upload_parser.php"。如果您需要,可以删除/testing文件夹。您需要按type="submit"

提交表单

在你的javascript中,需要更改

function uploadFile() {
var file = _("file").files[0];
alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file", file);

file1file

在file_upload_parser.php中

if(move_uploaded_file($fileTmpLoc, "/uploads/$fileName")){确保uploads文件夹的路径正确。

最后,无需向777授予文件夹权限。它非常危险。

这可能会对你有所帮助。 :)。如果你真的受益,请接受答案。我的回答留下了刻度线。