上传前限制图像文件大小

Question

我正在通过 AJAX 将图像作为 base64 字符串上传到 ASP.NET Web 服务。由于 AJAX/JSON，最大文件大小非常有限（根据我的测试，在 AJAX 请求变得太长之前大约 3MB）。

那么有什么方法可以将给定图像的大小调整为固定文件大小（如 3MB）而不是固定分辨率？

我现在已经了解 canvas 用于调整大小的功能，但设置分辨率 and/or 质量对我来说不仅仅是削减它。

我已经有了一个想法，就是让一个循环在几个周期内调整图像大小，并通过检查 base64 长度来检查近似文件大小，但这似乎既不高效又不够精确。

我知道我可以分块请求，但我也必须更改 WebService，我只是想在万不得已的情况下这样做。

Answer 1

如果您有一个输入文件元素...

<input type="file" id="myFile" />

你可以使用

var sizeInBytes = document.getElementById('myFile').files[0].size

获取文件大小

Answer 2

JSON 文件没有大小限制。您可以根据需要上传任意大的文件，只要您有足够的资源来处理它。 4MB 限制是 ASP.NET 端的默认限制。

您可以将 maxRequestLength 属性添加到您的 system.web - httpRuntime 配置键，它将接受任何大小的文件：

<configuration>
  <system.web>
    <httpRuntime maxRequestLength = "1048576" />
  </system.web>
</configuration>

对于 IIS 7+，您还需要添加：

<system.webServer>
  <security>
    <requestFiltering>
      <requestLimits maxAllowedContentLength="1073741824" />
    </requestFiltering>
  </security>
</system.webServer>

如果您仍想调整图像大小，您可以在服务器端或客户端执行此操作。
Resize an Image C#
HTML5 Pre-resize images before uploading

此外，还有一些插件可以做到这一点：Image resizing client-side with javascript before upload to the server

服务器端方式更可靠且独立于浏览器，而客户端方式将减少传入服务器的流量。

上传前限制图像文件大小

Limit image filesize before upload

javascript

ajax

jquery

base64

image