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

Question

我希望页面的用户：

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

感谢这里的 codepen的链接，我可以通过上面的步骤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中的anon / pen
• 我在jsfiddle中从shijin / 4EnRQ /获取了onchange="document.getElementById('file').value
• 我从onclick="uploadEx()" “ upload-html-canvas-data-to-php-server”获得了onclick="uploadEx()" 。

剧本 ：

<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()我从uploadEX() “ 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转换为图像。