文件上传预览备份3

/*

var elements = document.querySelectorAll('.fileInput');

elements.forEach(function(element) {

// JavaScript部分

element.addEventListener('change', function(event) {

    event.preventDefault();

    var index=this.getAttribute("indexInput");

// filenameList=getFileNames(this);

//   files=filenameList[index];

 var files = element.files;

  var html ='';

  for(var i=0;i<files.length;i++)

{

var file=files[i];

   var responseObject;

  

  if (!file.type.match('image.*')) {

    alert('只能上传图片文件');

    return;

  }

  

   var reader = new FileReader();

  reader.onload = function(event) {

    var img = new Image();

    img.onload = function() {

           var compressedDataUrl;

        

      // 创建一个压缩后的 canvas

      var canvas = document.createElement('canvas');

      var ctx = canvas.getContext('2d');

      var maxWidth = 1000;

      var maxHeight = 1000;

      var width = img.width;

      var height = img.height;

      // 根据最大宽度和最大高度计算缩放比例

      var scale = Math.min(maxWidth / width, maxHeight / height);

      if(scale<1)

      {

      width *= scale;

    

      height *= scale;

      }

      // 设置 canvas 的宽度和高度

      canvas.width = width;

      canvas.height = height;

      // 在 canvas 上绘制压缩后的图片

      ctx.drawImage(img, 0, 0, width, height);

      if(file.size/1024>100)

        {

      // 将压缩后的图片转换为数据URL

       compressedDataUrl = canvas.toDataURL('image/jpeg', 0.7);

        }

        else {    

              compressedDataUrl = img.src;}

      

      // 将数据URL发送到服务器

      // 可以使用 AJAX、Fetch API 或其他方法发送数据到服务器

      

      // 示例使用 Fetch API 发送数据

   

$.ajax({

  type: "POST",

  url: "admin.php?ac=purchase&fileurl=crm&do=uploadfile_expense",

  data: { image: compressedDataUrl },

  success: function(response) {

    // 处理成功响应

     responseObject = JSON.parse(response);

console.log(file.name);     

    html += '<a οnclick="previewWindowOpen(\'' + responseObject.path + '\')"  data-index="' + i + '">';

                

html += file.name+'</a>     '  

html +='<label style="font-size: 10px;" >'+responseObject.filesize+'kb</label>';

html+='<a οnclick="delete(\'' + responseObject.path + '\')" class="delete-btn" style="color:red;"  data-fileid="'+i+'">           删除</a><br>';

      document.getElementById("filetitle"+index).innerHTML+=html;

  },

  error: function(xhr, status, error) {

    // 处理错误

    console.error(error);

  }

});

    };

    // 设置图片的 src 属性，触发 onload 事件

    img.src = event.target.result;

  };

  // 读取文件数据

  reader.readAsDataURL(file);

/*

 html += '<a οnclick="preview(\'' + url + '\')" data-index="' + i + '">';

                

html += files[i].name+'</a>     '  

html +='<label style="font-size: 10px;" >'+Math.floor(files[i].size / 1024)+'kb</label>';

html+='<a οnclick="delete(\'' + url + '\') class="delete-btn" style="color:red;"  data-fileid="'+files[i].name+'">           删除</a><br>';

*/

/*

  }

});

});

*/

// var elements = document.querySelectorAll('.previewButton');

// elements.forEach(function(element) {

// element.addEventListener('click', function(event) {

//       event.preventDefault();

function preview(url){

// var index=this.getAttribute("indexInput");

//   var fileInput = document.getElementById('fileInput'+index);

  

//   if (fileInput.files.length === 0) {

//     alert('请先选择文件');

//     return;

//   }

  

//   var file = fileInput.files[0];

  

//   // 检查文件类型

//   if (!file.type.match('image.*')) {

//     alert('只能预览图片文件');

//     return;

//   }

  

fetch(url)

  .then(response => response.blob())

  .then(blob => {

    // 在这里可以使用 blob 对象进行操作

    file=blob;

    var reader = new FileReader();

  // 创建文件读取器

 reader.onload = function(event) {

  var image = new Image();

  image.src = event.target.result;

var previewWindow = window.open("", "_blank", "width=600, height=600, resizable=yes");

// 创建可斜拉的元素

 

// 监听窗口大小变化事件

window.addEventListener("resize", function() {

  var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

  var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

  previewWindow.resizeTo(width, height);

});

 

  previewWindow.document.write("<style>#closeButton { position: fixed; top: 10px; right: 10px; }</style>");

  previewWindow.document.write("<button id='closeButton'>关闭预览</button><br>");

  previewWindow.document.write("<img src='" + image.src + "'>");

  

  var closeButton = previewWindow.document.getElementById("closeButton");

  closeButton.onclick = function() {

    previewWindow.close();

  };

};

reader.readAsDataURL(file);

  });

 

}

// });

// });