好的,我在这一个白色的结尾。我正尝试使用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 - 火狐,Chrome浏览器不,IE或Safari 这仅适用于我假设,因为的使用“canvas.mozGetAsFile(”image.jpg“)”, 任何想法如何让它在Chrome上工作?
- >使用toBlob似乎工作,但似乎与页面重载突破,在Firefox而不是其他作品(不,我还没有尝试过填充工具)
3 - 理想我想有两个按钮,一个做调整大小,一个做正常形式提交,不知道该怎么做。目前我有两个完整的表单副本,一个用于调整大小,另一个用于正常文件提交。
4 - 图像以PNG格式上传,如何压缩为JPEG或压缩,即使调整大小,一些图像显示比他们更大的松散压缩。
- >使用toBlob似乎给您JPG,但似乎与页面重载突破,在Firefox而不是其他作品(不,我还没有尝试过填充工具)
对不起,多部分的问题,但我认为任何人想要这样做都需要所有的答案。
我不能完全明白你的观点。但也许你正在寻求我早些时候尝试的。我用JavaScript调整客户端图片的大小,然后将其上传到服务器。如果你正在寻找相似的东西,请告诉我。我有代码,发现一些奇怪的东西。 –
我的问题是如何在调用帖子后重新加载页面,就像正常的提交帖子会做? – James
window.location.href = window.location.href;试试这可能会得到重点。 –