在使用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

回答

相關問題