jquery 图片文件 base64

最新推荐文章于 2024-08-18 02:10:07 发布

qq_36028348

最新推荐文章于 2024-08-18 02:10:07 发布

阅读量430

点赞数

文章标签： jQuery Base64 图片转换 AJAX FileReader

原文链接：https://www.cnblogs.com/interdrp/p/7902506.html

版权

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" /> 
    <title>jquery 图片base64</title> 
 <script src="js/jquery1.7.min.js"></script>
</head> 
<body> 
    <div id="testPhone" class="weui_uploader_input_wrp" style="width:79px; height:79px;"> 
    </div> 
    <input id="testFile" type="file"> 
    <hr> 
    <img id="testImg" style="max-height: 300px; height: 8em; min-width:8em;"> 
    <hr> 
    <textarea id="testArea" style="display: block; width: 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>