Question

我正在尝试通过FilesAPI上传多个图片。我在这里有以下代码：

$(document).ready(function()
{
   function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);

    }
   uploadFile(f);
  }

 document.getElementById('files').addEventListener('change', handleFileSelect, false);

   function uploadFile(file)
   {
      var xhr = new XMLHttpRequest();
      var formData = new FormData();

      formData.append('file',file);

      xhr.open('POST', 'upload_team.php');
      xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');

        xhr.send(formData);
      $('#test').load('upload_team.php');
   }
});

如何将图像信息“传输”到PHP脚本以进行上传？我试过这样的事：

<?php
echo $_FILES['file'];
if(isset($_FILES['file'])) {
echo "hej<br>";
}
?>

但是回声中的代码没有被执行。

任何可以帮助我的人？

Answer 1

首先，html“form”元素应具有此属性

enctype= multipart/form-data

答案的其余部分是Handle File Uploads/Php Manual

Answer 2

http://jsfiddle.net/Tarnum/rya6X/7/（我略微修改了函数uploadFile）

PHP上的后端

<?php
   if(isset($_FILES['file'])) {
      echo $_FILES['file']['name'];
   }
?>

http://www.php.net/manual/en/features.file-upload.post-method.php

它应该有用。

如果没有 - 尝试在没有JavaScript和AJAX的情况下以通常的方式发送表单。例如，复制＆lt; form＆gt;来自http://jsfiddle.net/的代码，修复属性“action”，选择文件并单击提交按钮。

对于服务器，这与使用AJAX的HTTP请求完全相同。

如果问题仍然存在 - 则问题出在服务器端。可能在服务器配置中禁用了上传文件的能力。

通过FileAPI和PHP上传图像

2 个答案: