0

好的，我对此一无所知。我正在尝试使用 Javascript 在客户端上调整上传图像的大小。

我在用着，

    <script>                    
function uploadFiles() {
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        if (!document.getElementById('confirm').checked) {
            alert('You must click "confirm".');
            return false;
        }
        alert('begin');
        var files = document.getElementById('file').files;
        for(var i = 0; i < files.length; i++) {
            alert('start');
            resizeAndUpload(files[i]);
        }
        return false;
    } else {
        alert('The File APIs are not fully supported in this browser.');
        return false;
    }
}

function resizeAndUpload(file) {
    var reader = new FileReader();
    reader.onloadend = function() {

    var tempImg = new Image();
    tempImg.src = reader.result;
    tempImg.onload = function() {

        var MAX_WIDTH = 300;
        var MAX_HEIGHT = 300;
        var tempW = tempImg.width;
        var tempH = tempImg.height;
        if (tempW > tempH) {
            if (tempW > MAX_WIDTH) {
               tempH *= MAX_WIDTH / tempW;
               tempW = MAX_WIDTH;
            }
        } else {
            if (tempH > MAX_HEIGHT) {
               tempW *= MAX_HEIGHT / tempH;
               tempH = MAX_HEIGHT;
            }
        }

        var canvas = document.createElement('canvas');
        canvas.width = tempW;
        canvas.height = tempH;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0, tempW, tempH);

        var fd = new FormData();
        fd.append("upload-avatar", "Upload");
        var confirm = 'off';
        if (document.getElementById('confirm').checked) {
            confirm = 'on';
        }
        fd.append("confirm", confirm);
        fd.append("file", canvas.mozGetAsFile("image.jpg"));
        fd.append("license", document.getElementById('license').value);
        fd.append("name", document.getElementById('name').value);
        var share = 'off';
        if (document.getElementById('share').checked) {
            share = 'on';
        }
        fd.append("share", share);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "MyUploadServlet");
        xhr.send(fd);
        alert('done');
      }

   }
   reader.readAsDataURL(file);
}
</script>

然后在我的html中，

<form onsubmit="return uploadFiles()" method="post" enctype="multipart/form-data">
  <input id="file" type="file" name="file" multiple/><br/>
  <input id="confirm" type="checkbox" name="confirm">confirm</input><br/>
  ...
  <input name="upload-resize" value="Upload and resize" type="submit"/><br/>
</form>

这实际上可行，但页面不会重新加载，我希望它这样做以显示上传的图像。如果我从我认为会导致重新加载的函数返回 true，那么它就不起作用，它似乎永远不会调用帖子并挂起。我也试过 location.reload() 但类似的问题。

好的，我想我对这段代码有几个问题：

1 - 如何重新加载页面？

-> 答案似乎是调用“history.go(0);”，这似乎有效，

2 - 这仅适用于 Firefox，不适用于 Chrome、IE 或 Safari，因为使用了“canvas.mozGetAsFile("image.jpg")”，知道如何让它在 Chrome 上运行吗？

-> 使用 toBlob 似乎工作，但似乎与页面重新加载中断，适用于 Firefox 但不适用于其他（没有我还没有尝试过的 polyfill）

3 - 理想情况下，我会有两个按钮，一个用于调整大小，一个用于提交普通表单，也不知道该怎么做。目前我有两份完整的表格副本，一份用于调整大小，一份用于普通文件提交。

4 - 图像以 png 格式上传，如何压缩为 jpeg 或一般压缩，即使调整大小，有些图像显示比原来更大，因为它们失去了压缩。

-> 使用 toBlob 似乎给你 jpg，但似乎与页面重新加载中断，适用于 Firefox 但不适用于其他（没有我还没有尝试过的 polyfill）

很抱歉这个多部分的问题，但我认为任何想要这样做的人都需要所有的答案。

4

1 回答 1

1

Q2 使用 canvas.toBlob 代替 canvas.mozGetAsFile。有一个 polyfill 可以增加浏览器的兼容性。

用法如他们的页面所示

var canvas = document.createElement('canvas');
canvas.toBlob(
    function (blob) {
        // the blob is the jpeg file
        var formData = new FormData();
        formData.append('file', blob, fileName);
        /* ... */
    },
    'image/jpeg'
);

Q4 指定canvas.toBlob(callback, 'image/jpeg', quality)质量从 0.0 到 1.0（最高质量）

Q3 一个表单中可以有多个按钮。

<form>
  <input id="file" type="file" name="file" multiple/><br/>
  <input id="confirm" type="checkbox" name="confirm">confirm</input><br/>
  ...
  <input name="upload" value="Upload" type="button"/>
  <input name="upload-resize" value="Upload and resize" type="button"/>
</form>

请注意，表单标签不包含 onsubmit 属性，输入类型现在是按钮而不是提交。

  <input name="upload" value="Upload" type="button" onclick="myfunction()"/>

或者代替 onclick 属性，您可以使用 addEventListener 等。

Q1 你不应该回到历史。您的 location.reload() 是正确的，但必须在发送/上传完成后完成。

xhr.onreadystatechange = function() {
if (xhr.readyState != 4)  { return; }
     location.reload();
}

XMLHttpRequest是异步的，因此 send 方法甚至在上传完成之前就返回了！要知道发送是否完成，请使用 onreadystatechange，如上所示。

注意：您可能还想检查响应状态代码。

于 2013-11-01T14:03:34.693 回答