请帮忙修改E2EE的一个HTML压缩图片上传功能

yuye123 · 发表于 2023-6-5 21:07:07

<div class="panel panel-primary">
<div class="panel-heading"><h3 class="panel-title">上传报销单</h3></div>
<div class="panel-body">
<form action="/upload.php" method="post" enctype="multipart/form-data" ><input type="hidden" name="my" value="up">
<div class="alert alert-info">{{tongji}}</div>
<div class="form-group">
<label>日期:</label><br>
<input type="date" name="riqi" value="" />

</div>
<div class="form-group">
<label>报销金额:</label><br>
<input type="text" class="form-control" name="money" value="{{money}}"></div>
<div class="form-group">
<label>备注:</label>
<input type="text" class="form-control" name="bz" value="{{bz}}"></div>
<div class="form-group">
<label>账目分类</label>
<select class="form-control" name="zmfl"><option value="1">官任社区</option><option value="2">著赫(厦门)科技园</option><option value="3">漳州雅信厂房</option><option value="4">海沧张总</option>
<option value="5">置投厂房</option><option value="6">其他</option></select></div>
<div class="form-group">
<label>上传凭证:</label>

<input type="file" accept="image/*"  name="img">
<img src="images/scpz.png" height="200" alt="Image preview area..." title="preview-img" style="width: 50%; height: auto;">
<script>
  var fileInput = document.querySelector('input[type=file]'),
      previewImg = document.querySelector('img');
  fileInput.addEventListener('change', function () {
   var file = this.files[0];
   var reader = new FileReader();
   // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
   reader.addEventListener("load", function () {
      previewImg.src = reader.result;
   }, false);
   // 调用reader.readAsDataURL()方法，把图片转成base64
   reader.readAsDataURL(file);
  }, false);
</script>
</div>
<input type="submit" class="btn btn-primary btn-block" value="记账"></form>
</div>
</div>

因为对HTML不懂，使用E2EE编写的。目前遇到手机拍摄的图片过大导致上传速度很慢。

补充内容 (2023-6-5 21:08):
请帮忙修改一下，压缩图片后上传的功能

啊麟 · 发表于 2023-6-5 21:32:58

上传到OSS

补充内容 (2023-6-5 21:33):
取回地址，提交到E2EE

澎湃物联 · 发表于 2023-6-7 18:56:55

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>上传图片并压缩</title>
  <script src="https://cdn.jsdelivr.net/npm/image-compressor@7.0.0/dist/image-compressor.min.js"></script>
  <script>
function handleFileSelect(evt) {
   var file = evt.target.files[0];
   // 创建一个新的imageCompressor实例并进行压缩
   new imageCompressor(file, {
      quality: 0.6,
      success(result) {
      // 压缩成功后，将压缩后的图片作为参数，调用uploadFile函数进行上传
      uploadFile(result);
      },
      error(e) {
      console.log(e.message);
      },
   });
}

function uploadFile(file) {
   // 创建一个FormData对象，用于发送请求
   var formData = new FormData();
   // 向formData中添加文件数据
   formData.append("img", file, file.name);
   // 向formData中添加其他表单数据
   formData.append("my", "up");
   formData.append("riqi", document.getElementsByName("riqi")[0].value);
   formData.append("money", document.getElementsByName("money")[0].value);
   formData.append("bz", document.getElementsByName("bz")[0].value);
   formData.append("zmfl", document.getElementsByName("zmfl")[0].value);
   // 创建AJAX请求对象
   var xhr = new XMLHttpRequest();
   xhr.open("POST", "/upload.php", true);
   xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
      // 在此处添加上传成功后的处理代码
      console.log('上传成功');
      }
   };
   xhr.send(formData);
}

document
   .querySelector('input[type="file"]')
   .addEventListener("change", handleFileSelect, false);
  </script>
</head>
<body>
  <div class="panel panel-primary">
<div class="panel-heading">
   <h3 class="panel-title">上传报销单</h3>
</div>
<div class="panel-body">
   <form action="/upload.php" method="post" enctype="multipart/form-data">
      <input type="hidden" name="my" value="up">
      <div class="alert alert-info">{{tongji}}</div>
      <div class="form-group">
      <label>日期:</label><br>
      <input type="date" name="riqi" value="" />
      </div>
      <div class="form-group">
      <label>报销金额:</label><br>
      <input type="text" class="form-control" name="money" value="{{money}}">
      </div>
      <div class="form-group">
      <label>备注:</label>
      <input type="text" class="form-control" name="bz" value="{{bz}}">
      </div>
      <div class="form-group">
      <label>账目分类</label>
      <select class="form-control" name="zmfl">
         <option value="1">官任社区</option>
         <option value="2">著赫(厦门)科技园</option>
         <option value="3">漳州雅信厂房</option>
         <option value="4">海沧张总</option>
         <option value="5">置投厂房</option>
         <option value="6">其他</option>
      </select>
      </div>
      <div class="form-group">
      <label>上传凭证:</label>
      <input type="file" accept="image/*"  name="img">
      <br>
      <img src="" height="200" alt="Image preview area..." title="preview-img" style="width: 50%; height: auto;">
      </div>
      <input type="submit" class="btn btn-primary btn-block" value="记账">
   </form>
</div>
  </div>
</body>
<script>
  var fileInput = document.querySelector('input[type=file]');
  var previewImg = document.querySelector('img');
  fileInput.addEventListener('change', function () {
   var file = this.files[0];
   var reader = new FileReader();
   // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
   reader.addEventListener("load", function () {
      previewImg.src = reader.result;
   }, false);
   // 调用reader.readAsDataURL()方法，把图片转成base64
reader.readAsDataURL(file);
}, false);
</script>

</html>
———————————————————————————————上面是代码———————————————————————————————————————

注意下面这几点：
在<head>标签中，使用<script>标签引用了需要的JavaScript库和新添加的JavaScript代码。
在<input>标签中添加了accept="image/*"属性，以限制用户只能上传图片类型的文件。
在<input type="file">标签中添加了onchange="handleFileSelect(event)"属性，以便在上传图片时自动调用handleFileSelect函数。
在<img>标签中添加了src属性，该属性在代码加载时为空，但当用户选择要上传的图片时，<img>元素将显示所选图像。
JavaScript代码使用querySelector选择器选择<input>和<img>元素，并在文件上传时对所选文件进行了压缩，并在成功压缩后调用uploadFile函数进行文件上传。
在JavaScript代码中的formData.append语句中添加了所有正在上传的文本数据，就像普通的表单提交一样。

yuye123 · 发表于 2023-6-7 20:05:19

澎湃物联发表于 2023-6-7 18:56
上传图片并压缩

你好 image-compressor.min.js文件连接已经失效，有其他下载地址吗

澎湃物联 · 发表于 2023-6-7 20:12:29

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传图片并压缩</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<form>
<h2>上传图片并压缩</h2>
<div>
<input type="file" accept="image/*" onchange="compressImage(this.files)">
<br />
<img id="preview" style="max-width: 500px;">
</div>
<div>
<label>日期:</label><br>
<input type="date" name="riqi" value="" />
</div>
<div>
<label>提交说明:</label><br>
<textarea name="description"></textarea>
</div>
<div>
<button type="submit" onclick="uploadFile(event)">提交</button>
</div>
</form>

<script src="https://cdn.bootcdn.net/ajax/libs/compressorjs/1.0.5/compressor.min.js"></script>
<script>
// 压缩图片
function compressImage(files) {
var reader = new FileReader();
reader.onload = function (event) {
var image = new Image();
image.src = event.target.result;
image.onload = function () {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var maxHeight = 600;
var maxWidth = 600;
var width = image.width;
var height = image.height;
if (width > height) {
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
} else {
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
}
canvas.width = width;
canvas.height = height;
context.fillStyle = "#ffffff";
context.fillRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, width, height);
var dataURI = canvas.toDataURL('image/jpeg', 0.6);
$('#preview').attr('src', dataURI);
$('#preview').show();
}
};
reader.readAsDataURL(files[0]);
}

// 上传文件
function uploadFile(event) {
event.preventDefault();
var formData = new FormData(event.target.form);
var file = $('input[type="file"]').get(0).files[0];
if (file) {
var options = {
maxSizeMB: 0.5,
maxWidth: 1024,
maxHeight: 1024,
fileType: 'image',
exif: true,
success: function (result) {
formData.set('file', result);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (response) {
console.log(response);
},
error: function (error) {
console.log(error);
}
});
},
error: function (error) {
console.log(error);
}
};
new Compressor(file, options);
} else {
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (response) {
console.log(response);
},
error: function (error) {
console.log(error);
}
});
}
}
</script>
</body>
</html>

————————————————————————————————————————
这个用的是Compressor.js压缩的，配置里面有设定大小，清晰度什么的你自己修改

澎湃物联 · 发表于 2023-6-7 20:15:10

等下写错了重新写一份给你

澎湃物联 · 发表于 2023-6-7 20:16:54

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传图片并压缩</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<form id="form">
<h2>上传图片并压缩</h2>
<div>
<input type="file" accept="image/*" onchange="compressImage(this.files)">
<br />
<img id="preview" style="max-width: 500px;">
</div>
<div>
<label>日期:</label><br>
<input type="date" name="riqi" value="" />
</div>
<div>
<label>报销金额:</label><br>
<input type="text" name="money" value=""></div>
<div>
<label>备注:</label>
<input type="text" name="bz" value=""></div>
<div>
<label>账目分类</label>
<select name="zmfl">
<option value="1">官任社区</option>
<option value="2">著赫(厦门)科技园</option>
<option value="3">漳州雅信厂房</option>
<option value="4">海沧张总</option>
<option value="5">置投厂房</option>
<option value="6">其他</option>
</select>
</div>
<div>
<label>上传凭证:</label>
<input type="file" accept="image/*" name="image">
<img id="image-preview" style="max-width: 500px;display:none;">
</div>
<div>
<button type="submit" onclick="uploadFile(event)">记账</button>
</div>
</form>

<script src="https://cdn.bootcdn.net/ajax/libs/compressorjs/1.0.5/compressor.min.js"></script>
<script>
// 压缩图片
function compressImage(files) {
var reader = new FileReader();
reader.onload = function (event) {
var image = new Image();
image.src = event.target.result;
image.onload = function () {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var maxHeight = 600;
var maxWidth = 600;
var width = image.width;
var height = image.height;
if (width > height) {
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
} else {
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
}
canvas.width = width;
canvas.height = height;
context.fillStyle = "#ffffff";
context.fillRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, width, height);
var dataURI = canvas.toDataURL('image/jpeg', 0.6);
$('#preview').attr('src', dataURI);
$('#preview').show();
}
};
reader.readAsDataURL(files[0]);
}

// 上传文件
function uploadFile(event) {
event.preventDefault();
var form = document.querySelector('#form');
var formData = new FormData(form);
var fileInput = document.querySelector('input[type=file]');
var file = fileInput.files[0];
if (file) {
var options = {
maxSizeMB: 0.5,
maxWidth: 1024,
maxHeight: 1024,
fileType: 'image',
exif: true,
success: function (result) {
var compressedFile = new File([result], 'image', {
                        type: result.type,
                        lastModified: Date.now()
                     });
                     formData.set('image', compressedFile);
$.ajax({
url: form.action,
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (response) {
console.log(response);
},
error: function (error) {
console.log(error);
}
});
},
error: function (error) {
console.log(error);
}
};
new Compressor(file, options);
} else {
$.ajax({
url：‘upload.php’,
type: ‘POST’,
data: formData,
contentType: false,
processData: false,
success: function (response) {
console.log(response);
},
error: function (error) {
console.log(error);
}
});
}
}
// 预览图片
var fileInput = document.querySelector('input[type=file]');
var previewImg = document.querySelector('#image-preview');
fileInput.addEventListener('change', function () {
var file = this.files[0];
if (file) {
var reader = new FileReader();
reader.addEventListener('load', function () {
previewImg.src = reader.result;
previewImg.style.display = 'block';
});
reader.readAsDataURL(file);
} else {
previewImg.src = '';
previewImg.style.display = 'none';
}
});
</script>

yuye123 · 发表于 2023-6-7 21:07:24

澎湃物联发表于 2023-6-7 20:16
上传图片并压缩

很奇怪上传的图片还是没有压缩

		自动登录	找回密码
密码			注册

[Web相关] 请帮忙修改E2EE的一个HTML压缩图片上传功能

评分