美文网首页
文件选择框 jquery 转换成Base64字符串 传给后台

文件选择框 jquery 转换成Base64字符串 传给后台

作者: 梦半觉 | 来源:发表于2017-02-24 16:04 被阅读657次
    $('#XXX(你的input文件选择框的ID)').change(function(){//绑定onchang事件
                run(this, function (data) {  
                    uploadImage(data);
                });  
            });
    
            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())  
                    }  
                }  
            }  
              
            function uploadImage(img) {
                    $.ajax({
                        type: "POST",
                        url: ’上传图片接口‘,
                        data: { file: img.substr(img.indexOf(',') + 1)},    //视情况将base64的前面字符串data:image/png;base64,删除
                        cache: false,
                        success: function(data) {
                            alert("上传成功");
                            $("#articleImg").attr('src', JSON.parse(data).imageUrl);
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            alert("上传失败,请检查网络后重试");
                        }
                    });
                }
    

    相关文章

      网友评论

          本文标题:文件选择框 jquery 转换成Base64字符串 传给后台

          本文链接:https://www.haomeiwen.com/subject/aqywwttx.html