zoukankan      html  css  js  c++  java
  • jquery 图片文件转base64 显示

    <!DOCTYPE html>  
    <html>  
    <head>  
        <meta name="viewport" content="width=device-width" />  
        <title>jquery 图片base64</title>  
        <script type='text/javascript' src="@Url.Content("~/Scripts/jquery-1.10.2.js")"></script>  
    </head>  
    <body>  
        <div id="testPhone" class="weui_uploader_input_wrp" style="79px; height:79px;">  
        </div>  
        <input id="testFile" type="file">  
        <hr>  
        <img id="testImg" style="max-height: 300px; height: 8em; min-8em;">  
        <hr>  
        <textarea id="testArea" style="display: block;  100%;height: 30em;"></textarea>  
        <input id="btnTest" type="button" value="提交base" />  
        <script>  
            $("#testPhone").click(function () {  
                $("#testFile").click();  
            });  
      
            $("#testFile").change(function () {  
                run(this, function (data) {  
                    $('#testImg').attr('src', data);  
                    $('#testArea').val(data);  
                });  
            });  
      
            $("#btnTest").click(function () {  
                $.ajax({  
                    url: "/usercenter/testbaseaction",  
                    type: "post",  
                    dataType: "json",  
                    data: {  
                        "content": $("#testArea").val(),  
                    },  
                    async: false,  
                    success: function (result) {  
                        if (result.Code == 200) {  
                            alert(result.Data);  
                        } else {  
                        }  
                    }  
                });  
            });  
      
            function run(input_file, get_data) {  
                /*input_file:文件按钮对象*/  
                /*get_data: 转换成功后执行的方法*/  
                if (typeof (FileReader) === 'undefined') {  
                    alert("抱歉,你的浏览器不支持 FileReader,不能将图片转换为Base64,请使用现代浏览器操作!");  
                } else {  
                    try {  
                        /*图片转Base64 核心代码*/  
                        var file = input_file.files[0];  
                        //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件  
                        if (!/image/w+/.test(file.type)) {  
                            alert("请确保文件为图像类型");  
                            return false;  
                        }  
                        var reader = new FileReader();  
                        reader.onload = function () {  
                            get_data(this.result);  
                        }  
                        reader.readAsDataURL(file);  
                    } catch (e) {  
                        alert('图片转Base64出错啦!' + e.toString())  
                    }  
                }  
            }  
        </script>  
    </body>  
    </html>  
    

    jquery 图片base64

     



  • 相关阅读:
    NIO与普通IO文件读写性能对比
    JAVA学习.java.sql.date 与java.util.date以及gettime()方法的分析
    软件工程之软件设计
    ubuntu下管理android手机
    AFNetworking2.0 NSHipster翻译
    【Jsoup爬取网页内容】
    IOS 表视图UITableView 束NSBundle
    如何将位图格式图片文件(.bmp)生成geotiff格式图片?
    opencv3 使用glob遍历并修改文件名
    Ubuntu clion下载及激活
  • 原文地址:https://www.cnblogs.com/interdrp/p/7902506.html
Copyright © 2011-2022 走看看