Question

我想使用 AJAX 在输入类型文件的onchange上传图像。我只能使用 javascript，ajax和php。

查看我的代码：

的index.html

<form id="myForm" action="" enctype="multipart/form-data">
<input type="file" name="imagefile" id="imagefile" onchange="uploadImage()">
</form>

upoad.js

function uploadImage(){

    try {
       ajpass = new XMLHttpRequest();
    } catch (e) {
       ajpass = new ActiveXObject("Microsoft.XMLHTTP");
    }
       ajpass.onreadystatechange = epasscheck2;
       ajpass.open("post", "http://localhost/moodle/lib/editor/tinymce/plugins/moodleimage/upload.php", true);

       ajpass.send();
}
function epasscheck2() {
   if ((ajpass.readyState == 4) && (ajpass.status == 200)) {
       var restxt = ajpass.responseText;  
       alert(restxt);
    }
}

upload.php的

<?php

  echo $_FILES["imagefile"]["name"]; //error here

  //file upload code here

?>

我在Undefined index imagefile收到错误upload.php。

我无法将图像文件属性（如名称，大小，tmp_name等）从upload.js传递到upload.php。

Answer 1

使用下面的编码将帮助您验证文件

＆＃13;

$(document).ready(function (e) {
 $("#form").on('submit',(function(e) {
  e.preventDefault();
  $.ajax({
         url: "upload.php",
   type: "POST",
   data:  new FormData(this),
   contentType: false,
         cache: false,
   processData:false,
   beforeSend : function()
   {
    //$("#preview").fadeOut();
    $("#err").fadeOut();
   },
   success: function(data)
      {
    if(data=='invalid file')
    {
     // invalid file format.
     $("#err").html("Invalid File !").fadeIn();
    }
    else
    {
     // view uploaded file.
     $("#preview").html(data).fadeIn();
     $("#form")[0].reset(); 
    }
      },
     error: function(e) 
      {
    $("#err").html(e).fadeIn();
      }          
    });
 }));
});

＆＃13;

<form id="form" action="upload.php" method="post" enctype="multipart/form-data">
  <input id="uploadImage" type="file" accept="image/*" name="image" />
  <input id="button" type="submit" value="Upload">
 </form>
<div id="err"></div>

＆＃13;

＆＃13; 你必须创建一个文件夹＆＃34;上传＆＃34;。

   <?php

$valid_extensions = array('jpeg', 'jpg', 'png', 'gif', 'bmp'); // valid extensions
$path = 'uploads/'; // upload directory

if(isset($_FILES['image']))
{
 $img = $_FILES['image']['name'];
 $tmp = $_FILES['image']['tmp_name'];

 // get uploaded file's extension
 $ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));

 // can upload same image using rand function
 $final_image = rand(1000,1000000).$img;

 // check's valid format
 if(in_array($ext, $valid_extensions)) 
 {     
  $path = $path.strtolower($final_image); 

  if(move_uploaded_file($tmp,$path)) 
  {
   echo "uploaded";
  }
 } 
 else 
 {
  echo 'invalid file';
 }
}

?>

Answer 2

我现在感觉自己像个死灵法师，但无论如何，在我看来，这种情况下的主要问题是 send() 函数中没有发送实际数据。由于正在使用 XMLHttpRequest，因此表单数据不会与它一起发送，因为它会直接通过 HTML 进行重定向。为了解决这个问题，我们首先需要获取文件。

const img = document.getElementById("imagefile");
if (img.files.length == 0) return;
const file = img.files[0];

之后我想剩下要做的就是实际发送数据。

const data = new FormData();
data.append("imagefile", file);
ajpass.send(data);

有了这个，你希望能得到一个有效的结果。既然我觉得很慷慨，我也会给你一个额外的 PHP 点，它可能有用。

if (isset($_FILES['imagefile']) {
...
}

isset() 将更轻松地帮助您查看您要查找的内容是否确实存在于上下文中。如果出现问题，它可以让您找到问题所在，并且您可以避免令人讨厌的错误消息。

Answer 3

您可以使用Dropzone而不是重新发明轮子，

以下是链接：http://www.dropzonejs.com/#

如何使用javascript，ajax和php上传图片

3 个答案: