Question

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

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

<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\">');
    });

Answer 1

而不是

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

使用

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

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

1 个答案: