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

我使用jQuery从输入表单中获取图像文件，在HTML5画布中调整其大小，并将调整大小后的图像转换为dataURL。但是，我无法弄清楚如何将隐藏的输入值设置为dataURL。在使用jQuery进行表单提交时将隐藏的输入值设置为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\">'); 
    });

来源

2016-02-07 Feyman81

而不是

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

使用

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

来源

2016-02-07 06:13:02 Selcuk

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

回答

相关问题