Question

我正在构建一个Web应用程序，用户将在其中输入旧文件名和新文件名，他将能够下载生成的文件。

我是编码和Java编程的新手，所以我决定请大家看看，也许可以帮助我找到解决方案。

我尝试使用Jszip，但无法弄清楚如何配置它来获取用户输入而不是预定义的url。

<html>
<head>
</head>
<body>    
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.0.2/jszip-utils.min.js"></script>   
<script>
var urls = [
                 "https://cors-anywhere.herokuapp.com/https://img.tenniswarehouse-europe.com/new_big/AMSPP-BL-1.jpg", 
                 "https://cors-anywhere.herokuapp.com/https://img.tenniswarehouse-europe.com/new_big/AMSPP-BL-2.jpg",
                 "https://cors-anywhere.herokuapp.com/https://img.tenniswarehouse-europe.com/new_big/AMSPP-BL-3.jpg",
                 "https://cors-anywhere.herokuapp.com/https://img.tenniswarehouse-europe.com/new_big/AMSPP-BL-4.jpg",
                 "https://cors-anywhere.herokuapp.com/https://img.tenniswarehouse-europe.com/new_big/AMSPP-BL-5.jpg",
                 "https://cors-anywhere.herokuapp.com/https://img.tenniswarehouse-europe.com/new_big/AMSPP-BL-6.jpg",
                 "https://cors-anywhere.herokuapp.com/https://img.tenniswarehouse-europe.com/new_big/AMSPP-BL-7.jpg"];
var nombre = $scope.meetingName;
//The function is called
compressed_img(urls,nombre);

function compressed_img(urls,nombre) {
  var zip = new JSZip();
  var count = 0;
  var name = nombre+".zip";
  urls.forEach(function(url){
    JSZipUtils.getBinaryContent(url, function (err, data) {
      if(err) {
         throw err; 
      }
       var filename = url.replace(/.*\//g, "");
       zip.file(filename, data, { binary: true, createFolders: true });
       count++;
       if (count == urls.length) {
         zip.generateAsync({type:'blob'}).then(function(content) {
            saveAs(content, name);
         });
       }
      });
  });
}
</script>    
<br/>
<br/>
<center>
Click the button to generate a ZIP file
<br/>
<input id="button" type="button" onclick="compressed_img(urls,nombre)" value="Create Zip"></input>
</center>    
</body>    
</html>

我希望下载并重命名用户指定的文件，而不是以我的示例为例。

Answer 1

function compressed_img(urls,nombre) {
  var zip = new JSZip();
  var count = 0;
  var name = `${nombre}.zip`;
  var givenName = `test`;
  var counter = 1;
  urls.forEach(function(url){
    JSZipUtils.getBinaryContent(url, function (err, data) {

      console.log(data)
      if(err) {
         throw err; 
      }
       var extention = url.split('.').pop();
       zip.file(`${givenName}${counter}.${extention}`, data, { binary: true, createFolders: true });
       count++;
       counter++;
       if (count == urls.length) {
         zip.generateAsync({type:'blob'}).then(function(content) {
            saveAs(content, name);
         });
       }
      });
  });
}

Answer 2

<html>
<head>
</head>
<body>    
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.0.2/jszip-utils.min.js"></script>   
<script>


function compressed_img() {
  let name = document.getElementById('nm').value;
  let num = document.getElementById('num').value;
  let ext = document.getElementById('ext').value;
  var urls = new Array();

  for(let i = 1; i <= num; i++){
    urls.push(`https://cors-anywhere.herokuapp.com/https://img.tenniswarehouse-europe.com/new_big/${name}-${i}.${ext}`)
  }
  if(!name){
      alert("please provide the name first.")
      return false;
  }

  var zip = new JSZip();
  var count = 0;
  var nameZip = `${name}.zip`;
  var givenName = name;
  var counter = 1;
  urls.forEach(function(url){
    JSZipUtils.getBinaryContent(url, function (err, data) {

      console.log(data)
      if(err) {
         throw err; 
      }
       var extention = url.split('.').pop();
       zip.file(`${givenName}${counter}.${extention}`, data, { binary: true, createFolders: true });
       count++;
       counter++;
       if (count == urls.length) {
         zip.generateAsync({type:'blob'}).then(function(content) {
            saveAs(content, name);
         });
       }
      });
  });
}
</script>    
<br/>
<br/>
<center>
Click the button to generate a ZIP file
<br/>
Name To be Downloaded : <input type="text" id='nm' placeholder="AMSPP-BL">
Number Of Files : <input type="number" id='num' placeholder="7">
Files extension : <input type="text" id='ext' placeholder="jpg">

<input id="button" type="button" onclick="compressed_img()" value="Create Zip"></input>
</center>    
</body>    
</html>

如何下载，重命名和保存由用户输入生成的图像

2 个答案: