前端上传文件如何设置上传的文件的宽和高

前端上传文件通常涉及到HTML5的File API，它本身并不直接支持对上传的图片文件进行实时预览并设置宽度和高度。然而，你可以借助JavaScript库如`Fine Uploader`、`Dropzone.js` 或者 `Plupload` 来实现这个功能。

当你选择文件后，可以先使用 FileReader 对象读取文件内容，然后将图片数据转化为 Image 对象，通过它的 `naturalWidth` 和 `naturalHeight` 属性获取原始大小，之后再对图片进行裁剪或者调整大小。这一步通常是在服务器端或前端做处理，因为浏览器的安全限制不允许直接修改用户上传的原始文件。

例如，使用`canvas`技术可以临时绘制图片，并设置其大小：

function setDimensions(file, maxWidth, maxHeight) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const img = new Image();
    img.src = e.target.result;
    img.onload = function() {
      if (img.width > maxWidth || img.height > maxHeight) {
        // 使用canvas缩放和裁剪
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = maxWidth;
        canvas.height = maxHeight;
        ctx.drawImage(img, 0, 0, maxWidth, maxHeight);
        // 将处理后的图片URL返回给用户或其他后续操作
        const resizedUrl = canvas.toDataURL(file.type);
      } else {
        resizedUrl = file.type === 'image/jpeg' ? URL.createObjectURL(img) : '';
      }
      // 这里可以将resizedUrl用于显示或保存
    };
    reader.readAsDataURL(file);
  };
  reader.readAsDataURL(file);
}