javascript - 保存到本地计算机后自动重命名文件的脚本？

Question

我希望我的页面的用户:

1. 从本地计算机浏览电影文件
2. 从他刚刚在第 1 步中输入的电影中获取图像
3. 将图像文件命名为与电影文件名完全相同
4. 将此图像文件上传到服务器

感谢 codepen here 的链接，我可以通过上面的步骤1和步骤2。

(请查看上面的链接以获取完整代码)，HTML :

<p><strong>Select a video or image file</strong><br /><br />Supported browsers (tested): Chrome, Firefox, Safari, Opera, IE10, IE11, Android (Chrome), iOS Safari (10+)</p>

<div></div>

因此，我将代码复制/粘贴到我的页面。之后，我可以通过告诉用户“手动”进入下一步

• (3a) 右键单击​​图像并选择“将图像另存为...”
• (3b) 在“图像另存为”对话框中将文件重命名为 与电影文件名相同，并添加 .jpg 扩展名而不是 默认为 .png
• (3c) 从我提供的表格中，浏览他的本地计算机并选择 这个 jpg 文件
• (4) 点击“提交”按钮将jpg文件上传到服务器

假设我是用户，我单击“浏览”按钮并选择 SinCity.mp4 电影。然后我看到页面上显示了电影中的静态图像。没有执行 3a、3b 和 3c，我只需单击另一个按钮 - 即“提交”按钮来上传 SinCity.jpg

我的问题是:是否可以“自动”执行第 3 步，以便用户不必执行 3a、3b 和 3c？。我的意思是 3a 3b 3c 的过程由脚本接管。如果可能的话，有人可以帮助我编写脚本吗？

仅供引用，我的页面位于 .php 扩展文件中。

提前谢谢您。

================================================== =====================

编辑:我找到了答案。 感谢所有在互联网上提交代码的用户，也感谢 Douwe de Haan 帮助我如何做到这一点。很抱歉，我的帖子中不能放置两个以上的链接，我只会复制/粘贴来自 3 个不同来源的代码，以防有人遇到与我相同的情况。

首先，CSS:

div {
  line-height: 200px;
}

img {
  padding: 5px;
  vertical-align: middle;
  text-align: center;
}

@supports (object-fit: cover) {
  img {
    object-fit: cover;
  }
}

上面的CSS是我从codepen中的anon/pen获得的。

HTML:

<input type="file" accept=".jpg,.jpeg.,.gif,.png,.mov,.mp4" onchange="document.getElementById('file').value = 
this.value.split('\\').pop().split('/').pop()" />

<p><strong>Select a video or image file</strong><br /><br />Supported browsers (tested): Chrome, Firefox, Safari, Opera, IE10, IE11, Android (Chrome), iOS Safari (10+)</p>

<div></div>


<input type="button" onclick="uploadEx()" value="Upload" />
<form method="post" accept-charset="utf-8" name="form1">
<input name="hidden_data" id='hidden_data' />
<input type="text" name="file" id='file' type="hidden"/>
</form>

上面的html是我从

得到的组合

• codepen 中的匿名/笔
• 我从中得到的 onchange="document.getElementById('file').value jsfiddle 中的 shijin/4EnRQ/和
• 我从 onclick="uploadEx()" 得到的 代码池中的“upload-html-canvas-data-to-php-server”。

脚本:

<script>
document.getElementsByTagName('input')[0].addEventListener('change', function(event) {
  var file = event.target.files[0];
  var fileReader = new FileReader();
  if (file.type.match('image')) {
    fileReader.onload = function() {
      var img = document.createElement('img');
      img.src = fileReader.result;
      document.getElementsByTagName('div')[0].appendChild(img);
    };
    fileReader.readAsDataURL(file);
  } else {
    fileReader.onload = function() {
      var blob = new Blob([fileReader.result], {type: file.type});
      var url = URL.createObjectURL(blob);
      var video = document.createElement('video');
      var timeupdate = function() {
        if (snapImage()) {
          video.removeEventListener('timeupdate', timeupdate);
          video.pause();
        }
      };
      video.addEventListener('loadeddata', function() {
        if (snapImage()) {
          video.removeEventListener('timeupdate', timeupdate);
        }
      });
      var snapImage = function() {
        var canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
        var image = canvas.toDataURL();
        var success = image.length > 100000;
        if (success) {
          var img = document.createElement('img');
          img.src = image;
          document.getElementsByTagName('div')[0].appendChild(img);
          URL.revokeObjectURL(url);
        }
        return success;
      };
      video.addEventListener('timeupdate', timeupdate);
      video.preload = 'metadata';
      video.src = url;
      // Load video in Safari / IE11
      video.muted = true;
      video.playsInline = true;
      video.play();
    };
    fileReader.readAsArrayBuffer(file);
  }
});


function uploadEx() {
                var dataURL = document.images[0].src;
                document.getElementById('hidden_data').value = dataURL;
                var fd = new FormData(document.forms["form1"]);

                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'upload_data.php', true);

                xhr.upload.onprogress = function(e) {
                    if (e.lengthComputable) {
                        var percentComplete = (e.loaded / e.total) * 100;
                        console.log(percentComplete + '% uploaded');
                        alert('Succesfully uploaded');
                    }
                };

                xhr.onload = function() {

                };
                xhr.send(fd);
            };
</script>

上面的脚本是我从codepen中的anon获得的，最后一个函数uploadEX()是我从codepool中的“upload-html-canvas-data-to-php-server”获得的， document.images[0].src;我从 W3School 获取它。

最后是upload_data.php

<?php
$upload_dir = "uploads/";
$img = $_POST['hidden_data'];
$file_name = substr($_POST['file'],0,-4);
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir . $file_name . ".jpg";
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>

上面的 php 我是从代码池中的“upload-html-canvas-data-to-php-server”获取的。

非常感谢大家。

Answer 1

如果您接受用户不下载任何内容并且流程更改为:

• 用户选择电影
• 脚本需要上传静止图像
• 用户按下上传按钮，仍然上传

那么，是的，只需几个步骤:

以类似于 snapshot_base64 的形式创建隐藏输入

<input type="hidden" name="snapshot_base64" id="snapshot_base64">

接下来，在您提供的代码笔中，有一行内容为 var image = canvas.toDataUrl()。在该行之后，输入以下代码:

snapshot_input = document.getElementById('snapshot_base64');
snapshot_input.setAttribute('value', image);

这会将 Base64 数据加载到隐藏输入中。

您仍然需要自己获取上传的电影的名称，并将其添加到隐藏输入中，这样您就知道要为该文件指定什么名称。

此后，您需要提交表单并读取您正在使用的 php 文件中的 base64。 描述了将 base64 转换为图像 here .