Question

假设我有以下表格

<form name="my-form" method="post" action="handler.php">
<p>
<input type="text" name="cname" placeholder="Enter your name here" id="cname"/>
</p>
</p>
<input type="file" id="imageid" name="imageid"/>
</p>
<p>
<input type="submit" value="submit"/>
</p>

</form>

现在我想在提交表单之前调整图片大小。我必须按照javascript代码来处理提交事件

function processForm(e) {
    if (e.preventDefault) e.preventDefault();
//what to do here?

    return false;
}

var form = document.getElementById('my-form');
if (form.attachEvent) {
    form.attachEvent("submit", processForm);
} else {
    form.addEventListener("submit", processForm);
}

之前我曾经使用php调整服务器端的图像大小。但我想在客户端做这个过程..但我不知道如何做到这一点。

Answer 1

在HTML 5中，您可以使用canvas元素调整客户端图像的大小。您还可以获取新数据并将其发送到服务器。请参阅本教程：

http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/

是否可以在提交表单之前提交html表单-Data，并在客户端调整图像大小

1 个答案: