Question

我有一个场景，提示用户从本地磁盘中选择文件（图像）。选择后，此图像显示在浏览器中（不上传）。看到图像后，用户在CN No字段中输入数字。提交后，我想使用用户输入的数字重命名本地磁盘上的文件。是否可以使用PHP或Javascript在代码中执行此操作？

<html>
<head>
<script type='text/javascript'>
function preview_image(event) 
{
 var reader = new FileReader();
 reader.onload = function()
 {
  var output = document.getElementById('output_image');
  output.src = reader.result;
  }
  reader.readAsDataURL(event.target.files[0]);
  }
</script>
</head>
<body>
<form>
 Select File: <input type="file" accept="image/*"     onchange="preview_image(event)"> <br>
 Enter CN No. <input type="number" id="cnno" name="cnno"> <br>
 <input id="sbt" type="submit" name="submit" value="Submit" accesskey="u">     <br>
</form>

 <img id="output_image" style="width: 400px"/>

</body>
</html>

Answer 1

尝试一下：

var file = document.GetElementById('fileupload1');
var blob = file.files[0].slice(0, -1, 'image/png'); 
newFile = new File([blob], 'name.png', {type: 'image/png'});

但是它仅用于图像重命名。

Answer 2

您可以这样做，假设可以下载文件。

<html>
<head>
  <script type='text/javascript'>
  var img;

  function preview_image(elm) {
   var reader = new FileReader();
   reader.onload = function(event) {
     img = event.target.result
     document.getElementById("image_preview").src = img;
   };
   reader.readAsDataURL(elm.files[0]);
  }

  function download() {
    var element = document.createElement('a');
    element.setAttribute('href', img)
    element.setAttribute('download', document.getElementById("cnno").value+'.png');

    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
  }
  </script>
</head>
<body>

Select File: <input type="file" accept="image/*" onchange="preview_image(this)"> <br>
Enter CN No. <input type="number" id="cnno" name="cnno"> <br>
<input id="sbt" type="submit" name="submit" value="Submit" accesskey="u" onclick="download()"><br>

<img id="image_preview" style="width: 400px"/>

</body>
</html>

使用PHP或Javascript重命名本地磁盘上的文件

2 个答案: