javascript - 来自临时路径的 PHP 流文件？

Question

我有一个 PHP/JS 文件上传，我想在 100% 上传之前流式传输视频。

我如何做到这一点？

fileupload.html(JS，uploadFile()):

var file = document.getElementById("file1").files[0];   
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.open("POST", "file_upload_parser.php");
ajax.send(formdata);

文件上传.html (html)

<form id="upload_form" enctype="multipart/form-data" method="post">
  <input class="fileUpload" type="file" name="file1" id="file1"><br>
  <input id="uploadBtn" type="button" value="Upload File" onclick="uploadFile()">
</form>

file_upload_parser.php:

<?php
$fileName = $_FILES["file1"]["name"];
$fileTmpLoc = $_FILES["file1"]["tmp_name"];

if(move_uploaded_file($fileTmpLoc, "uploads/$fileName")){
    echo "complete";
}
?>

VideoStream.php: https://gist.github.com/ranacseruet/9826293

streamer.php

<?php
    $path = $_GET['path'];
    include "VideoStream.php";
    $stream = new VideoStream($path); 
    $stream->start();exit;
?>

<video controls preload="auto" src="<?php echo $path ?>" width="100%"></video>

Answer 1

好吧，您想在人们上传视频之前向他们展示他们选择的内容的预览。

HTML 和 JavaScript 代码

(function Preview_Video() {
	'use strict'
  var URL = window.URL || window.webkitURL
 
 
  var Play_Video = function (event) {
    var file = this.files[0]
    var type = file.type
    var videoNode = document.querySelector('video')
    var fileURL = URL.createObjectURL(file)
    videoNode.src = fileURL
  }
  
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', Play_Video, false)
})()

<div id="video"></div>
<video controls autoplay></video>

<form method="POST" name="form">
<input type="file" name="media-vid" accept="video/*"/>
<input type="submit" name="submit" value="submit"/>
</form>

只需使用此代码即可。

我的网站/屏幕上的示例图片: