I have a file input for jpeg images. It generates base64 string on change and puts it into other invisible text input. Then I press button and the string is sent to server using ajax POST.
It works fine with pictures under 300-400kb, but when I try to upload big image with like 500kb+ size, base64 string is limited to 524288 characters.
<input type="file" id="imgUp" accept=".jpg" display: none;">
<input type="text" id="imgTempUrl"/>
<script type="text/javascript">
$(function(){
//When new file/image is loaded, update temporary input with new base64 string
$('#imgUp').change(function(){
imgUp = document.getElementById('imgUp');
if(imgUp.files && imgUp.files[0]){
var reader = new FileReader();
reader.onload = function(e){
$('#imgTempUrl').val(e.target.result);
};
reader.readAsDataURL(imgUp.files[0]);
}
});
});
</script>
My question is:
is there a way I can remove the limit of characters of my input or compress/resize image before its transformation to base64 string?
Thank you in advance!
I found easy solution: I use hidden image instead of text input and then use its "src" attribute as my base64 string: it's not limited and works with very large files.
<input type="file" id="imgUp" accept=".jpg">
<img src="" id="imgTempUrl" style="" display: none;">
<script type="text/javascript">
$(function(){
//When new file/image is loaded, update temporary input with new base64 string
$('#imgUp').change(function(){
imgUp = document.getElementById('imgUp');
if(imgUp.files && imgUp.files[0]){
var reader = new FileReader();
reader.onload = function(e){
$('#imgTempUrl').attr("src",e.target.result);
};
reader.readAsDataURL(imgUp.files[0]);
}
});
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.