dongzhuan1185 2017-04-04 09:12
浏览 150
已采纳

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

I want the user of my page to :

  1. browse a movie file from his local computer
  2. get an image from the movie he just input it in step 1
  3. name the image file exactly the same with the movie file name
  4. upload to the server this image file

Thanks to the link from codepen here, I can pass step 1 and step 2 above.

(Please have a look to the link above for the complete codes), The 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>

So, I copy/paste the codes to my page. After this I can just go to the next steps "manually" by telling the user to

  • (3a) right click the image and choose "Save image as..."
  • (3b) rename the file in the "Save image as" dialog box exactly the same with the movie file name and put a .jpg extension instead of the default one which is .png
  • (3c) from the form I provide, browse his local computer and select this jpg file
  • (4) push the "Submit" button to upload the jpg file to the server

Suppose I'm the user, I click the "Browse" button and select SinCity.mp4 movie. Then I saw the page showing a still image from the movie. Without doing 3a, 3b and 3c, I just click another button - which is the "Submit" button to upload SinCity.jpg

My question is : will it be possible to "auto" step 3 so the user doesn't have to do 3a, 3b and 3c ?. I mean the process of 3a 3b 3c are taken over by a script. If possible, would somebody help me for the script ?

FYI, my page is in .php extension file.

Thank you in advanced.

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

EDIT : I found the answer. Thank you to all user who submit a codes in the internet and thank you also to Douwe de Haan who help me on how to do it. I'm sorry since I can not put more than two links in my post, I will just copy/paste the codes which come from 3 different sources, in case there is someone who face the same case with me.

First, the CSS :

div {
  line-height: 200px;
}

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

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

The css above I got it from anon/pen in codepen.

The 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>

The html above is a combination which I got from

  • anon/pen in codepen
  • the onchange="document.getElementById('file').value I got it from shijin/4EnRQ/ in jsfiddle and
  • the onclick="uploadEx()" I got it from "upload-html-canvas-data-to-php-server" in codepool.

The SCRIPT :

<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>

The script above I got it from anon in codepen, the last function uploadEX() I got it from "upload-html-canvas-data-to-php-server" in codepool and the document.images[0].src;I got it from W3School.

Finally the 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.';
?>

The php above I got it from "upload-html-canvas-data-to-php-server" in codepool.

Thank you very much, All.

  • 写回答

1条回答 默认 最新

  • dsqdpn31467 2017-04-04 09:23
    关注

    If you'll accept that the user doesn't download anything and the flow is changed to this:

    • User selects a movie
    • Script gets a still to upload
    • User presses upload button and still is uploaded

    Then yes, it just takes a few steps:

    Create a hidden input in the form named something like snapshot_base64

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

    Next, in the codepen you provided is a line that says var image = canvas.toDataUrl(). After that line, put the following code:

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

    This loads the base64 data into the hidden input.

    What you still need to to yourself is grabbing the name of the uploaded movie and add that to a hidden input as well, so you'll know what name to give to the file.

    After this you'll need to submit the form and read the base64 in the php files you are using. Converting base64 to an image is described here.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗