使用 jQuery 在表单提交时将隐藏的输入值设置为数据 URL

Setting hidden input value to a dataURL on form submit using jQuery

本文关键字：输入 设置 URL 数据 隐藏 jQuery 表单提交 使用      更新时间：2023-09-26

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

我已经确认我可以使用控制台.log在 img.onload 函数中看到 dataURL，但如果我在函数外的任何地方使用控制台.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'">');
    });

而不是 

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

用

$('#myData').val(dataURL);
相关文章：