js获取input上传图片装换为base64格式图片

<input name="upimage" id="upload_file" type="file">
<img src="/img/touxiang.jpg" id="showImage" ><br /><br />

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> //jq cdn
  <script type="text/javascript">
    var imgurl = ‘aaa‘;
    $(‘#upload_file‘).change = function (){
            gen_base64();
        };
    function $_(id) {
      return document.getElementById(id);     }
    function gen_base64() {
      var file = $_(‘upload_file‘).files[0];
      r = new FileReader();  //本地预览
      r.onload = function(){
       console.log(r.result)    //r.result 即为base64编码
      $(‘#showImage‘).attr(‘src‘,r.result)
        }
        r.readAsDataURL(file);    //Base64
     }
</script>

  

时间: 2024-10-25 22:44:18

js获取input上传图片装换为base64格式图片的相关文章

js获取input长度并根据页面宽度设置大小

1. js获取页面宽度高度及屏幕分辨率 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去

js获取input文本框内容问题

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><td><input type="text" name="username" placeholder="请输入用户名&

js 获取input file路径改变图像地址

html代码 <img id="newImage" alt="100x100" src="__PUBLIC__/img/1.jpg" class="img-circle" width="100px" height="100px" > <input id="image" type='file' name='myFile' size='15' oncha

Js实现input上传图片并显示缩略图

用这个方法就可以很方便快捷的实现上传图片并显示缩略图的效果: FileReader 的 readAsDataURL() 先创建一个img标签,再用 fileReader 把input文件的赋值到img的src即可 具体代码如下: function previewFile() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; v

通过input上传图片,判断不同浏览器及图片类型和大小的js代码

1.jsp页面代码 [html] view plain copy <form id="userPhoto" name="userPhoto" method="post" action="../uploadUserPhoto" enctype="multipart/form-data"> <input type="hidden" id="max_PhotoSiz

js 获取input选择的图片的信息

1JS $("#btn").click(function () { var imageEle = document.getElementById("images");//jquery 无法获取到 // 获取文件上传域内输入的多个文件 var fileList = imageEle.files; //遍历每个文件 for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; // div

js 获取input 中name值的问题

获取单选按钮选中的name值 :var replyidRadio =  $("input[name='replyidRadio']:checked").val(); 获取checkbox选中的name值 checkval = $("input:checkbox[name='check[]']:checked").map(function(index,elem) { return $(elem).val(); }).get().join(',');

用js获取input中type=file文件内容

1.先获取到input节点 2.利用FileReader对象读取文件 3.文件读取完毕后会有一个回调函数,拿到结果即可 示例: var files = $('#fileImport').prop('files');// 获取到文件列表 var reader = new FileReader();// 新建一个FileReader reader.readAsText(files[0], "UTF-8");// 读取文件 reader.onload = function (evt) { /

javascript笔记——js获取input标签中光标的索引

出处:http://www.cnblogs.com/MrZouJian/p/5850553.html function getTxt1CursorPosition(){ var oTxt1 = document.getElementById("txt1"); var cursurPosition=-1; if(oTxt1.selectionStart){//非IE浏览器 cursurPosition= oTxt1.selectionStart; }else{//IE var range