Question

我正在使用文件分块解决方案（无法记住我在哪里找到的），但是我已经根据需要修改了该解决方案。问题是，尽管大多数情况下文件会成功上传，但有时会出现错误

(Uncaught SyntaxError: Unexpected token < in JSON at position 0)

我同时也遇到另一个错误

( unlink(test/H2jig-6.png): Resource temporarily unavailable in ... )

我希望你们能够在我的代码中发现导致此问题的问题。我认为它可以在完成上传之前过早地取消链接文件，然后找不到它们。

上传文件HTML / JS

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>test upload by chunk</title>
</head>
<body>
  <input type="file" id="f" />

  <script>
  function makeid() {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for (var i = 0; i < 5; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
}


  (function() {

var f = document.getElementById('f');

if (f.files.length)
processFile();

f.addEventListener('change', processFile, false);


function processFile(e) {
var scount = 0;
var file = f.files[0];
console.log(file);
var ext =  file.name.split('.').pop();
ext = '.'+ext;
var size = file.size;

var sliceSize = 250000;
var num_of_slices = Math.ceil(size / sliceSize);
var fileid = makeid();
var start = 0;

setTimeout(loop, 1);

function loop() {
  var end = start + sliceSize;

  if (size - end < 0) {
    end = size;
  }

  var s = slice(file, start, end);
  scount ++;
  send(s, start, end,scount,size,num_of_slices,ext,fileid);

  if (end < size) {
    start += sliceSize;
    setTimeout(loop, 1);
  }
}
}


function send(piece, start, end,scount,size,num_of_slices,ext,fileid) {
var formdata = new FormData();
var xhr = new XMLHttpRequest();

xhr.open('POST', 'uploadchunk2.php', true);

formdata.append('start', start);
formdata.append('end', end);
formdata.append('file', piece);
formdata.append('scount', scount);
formdata.append('fsize', size);
formdata.append('num_of_slices', num_of_slices);
formdata.append('ext', ext);
formdata.append('fileid', fileid);
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myArr = JSON.parse(this.responseText);
        console.log(myArr);
        // myFunction(myArr);
    }
};
xhr.send(formdata);
}

/**
* Formalize file.slice
*/

function slice(file, start, end) {
var slice = file.mozSlice ? file.mozSlice :
            file.webkitSlice ? file.webkitSlice :
            file.slice ? file.slice : noop;

return slice.bind(file)(start, end);
}

function noop() {

}


})();


  </script>
</body>
</html>

PHP上传

<?php


$target_path = '/test/';

$tmp_name = $_FILES['file']['tmp_name'];
$filename = $_FILES['file']['name'];
$target_file = $target_path.$filename;
$num_chunks_uploaded = $_POST['scount'];
$num_chunks_created = $_POST['num_of_slices'];
$extension = $_POST['ext'];
$file_id = $_POST['fileid'];
$file_location = 'test/';
$file_path = $file_location.$file_id.$extension;
$chunked_file_path = $file_location.$file_id.'-'.$num_chunks_uploaded.$extension;
move_uploaded_file(
    $_FILES['file']['tmp_name'],
    $chunked_file_path
);




// count ammount of uploaded chunks
$chunksUploaded = 0;
for ($i=1; $i <= $num_chunks_created ; $i++) {
  if ( file_exists($file_location.$file_id.'-'.$i.$extension) ) {
       ++$chunksUploaded;
  }
}



// when this triggers - that means the chunks are uploaded
if ($chunksUploaded == $num_chunks_created) {

    /* here you can reassemble chunks together */
    for ($i = 1; $i <= $num_chunks_created; $i++) {

      $file = fopen($file_location.$file_id.'-'.$i.$extension, 'rb');
      $buff = fread($file, 2097152);
      fclose($file);

      $final = fopen($file_path, 'ab');
      $write = fwrite($final, $buff);
      fclose($final);

      unlink($file_location.$file_id.'-'.$i.$extension);
    }
}

$data = $chunksUploaded;
header('Content-Type: application/json');
echo json_encode($_POST);









 ?>

Answer 1

这不是解决问题的方法，但是它解决了JavaScript中确实存在的一个问题。

PHP要求将MAX_FILE_SIZE字段与上传的文件一起发送。该字段必须出现在POST变量中的文件字段之前。因此，您需要添加：

formdata.append('MAX_FILE_SIZE', 1000000) // or whatever you want the max size to be

包含要发送文件的字段之前。

HTML JS PHP文件块上传

1 个答案: