使用jQuery在表单提交上将隐藏的输入值设置为dataURL答案

【问题标题】：Setting hidden input value to a dataURL on form submit using jQuery使用jQuery在表单提交上将隐藏的输入值设置为dataURL
【发布时间】：2016-05-16 23:26:18
【问题描述】：

我正在使用 jQuery 从输入表单中获取图像文件，在 HTML5 画布中调整其大小，并将调整后的图像转换为 dataURL。但是，我不知道如何将隐藏输入的值设置为 dataURL。

我已经确认我可以在 img.onload 函数中使用 console.log 查看 dataURL，但如果我在函数之外的任何地方使用 console.log 则不能。这就是我在 img.onload 中提交表单的原因。但是，当它到达服务器时，该值始终为“未设置”。

<form id='upForm' enctype="multipart/form-data" action="" method="post">
    <table>
        <tr><th><label for="id_file">File:</label></th><td><input id="id_file" name="file" type="file" /></td></tr>
    </table>
    <input type='hidden' name='csrfmiddlewaretoken' value='rLSVnSf35kwe9Yvq7P85lqmcp3LmC77J' />
    <BR>        
    <input type="hidden" id="myData" name="dataURL" value="Not set" />
    <input type="submit" name="sendFile" id="sendButton" value="Submit" class="btn btn-lg btn-primary">
</form>

<script>
$('#upForm').submit(function(e) {
    e.preventDefault();

    var self = this;
    var img = document.createElement("img");
    var reader = new FileReader();
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    var dataURL = ""

    img.onload = function() {
        ctx.drawImage(img, 0, 0, 600, 800);
        dataURL = canvas.toDataURL("image/jpeg", 1.0);
        $('#myData').attr('value', dataURL);
        self.submit();}

    reader.onload = function(event) {
        img.src = event.target.result;}

    reader.readAsDataURL($('#id_file')[0].files[0]);

    $('#main').html('<P>Uploading receipt.<P><img src=\"/static/receipts/loading.gif\">');
    });

【问题讨论】：

标签： javascript django html forms canvas

【解决方案1】：

代替

$('#myData').attr('value', dataURL);

使用

$('#myData').val(dataURL);

【讨论】：