【原创】php无框架webuploader上传图片以base64形式保存到数据库

本文链接：https://blog.csdn.net/vancyf/article/details/53582165

本文介绍了如何在PHP环境下，利用WebUploader插件进行图片上传，并将图片以Base64编码的形式保存到数据库中。在iOS 10.0的环境下，由于表单和常规JS方法存在问题，作者采用了Base64的方式解决上传问题。

摘要由CSDN通过智能技术生成

首先下载webuploader插件文件，引入插件：

<link rel="stylesheet" type="text/css" href="../webuploader/0.1.5/webuploader.css" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
<script type="text/javascript" src="../webuploader/0.1.5/webuploader.min.js"></script>

webuploader插件js部分：

<script type="text/javascript">
            $(function(){
   
                // 时间插件
                $('#beginTime').date();
                $('#endTime').date();

                // //文件上传插件
                // var uploader = WebUploader.create({
   

                //     // 选完文件后，是否自动上传。
                //     auto: true,

                //     // swf文件路径
                //     swf: '../webuploader/0.1.5/Uploader.swf',

                //     // 文件接收服务端。
                //     server: 'action.php?a=inte',

                //     // 选择文件的按钮。可选。
                //     // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                //     pick: '#filePicker',

                //     // 只允许选择图片文件。
                //     accept: {
   
                //         title: 'Images',
                //         extensions: 'gif,jpg,jpeg,bmp,png',
                //         mimeTypes: 'image/*'
                //     }
                // });
                // 当domReady的时候开始初始化
                    $(function() {
   

                        var $wrap = $('.uploader-list-container'),

                            // 图片容器
                            $queue = $( '<ul class="filelist"></ul>' )
                                .appendTo( $wrap.find( '.queueList' ) ),

                            // 状态栏，包括进度和控制按钮
                            $statusBar = $wrap.find( '.statusBar' ),

                            // 文件总体选择信息。
                            $info = $statusBar.find( '.info' ),

                            // 上传按钮
                            $upload = $wrap.find( '.uploadBtn' ),

                            // 没选择文件之前的内容。
                            $placeHolder = $wrap.find( '.placeholder' ),

                            $progress = $statusBar.find( '.progress' ).hide(),

                            // 添加的文件数量
                            fileCount = 0,

                            // 添加的文件总大小
                            fileSize = 0,

                            // 优化retina, 在retina下这个值是2
                            ratio = window.devicePixelRatio || 1,

                            // 缩略图大小
                            thumbnailWidth = 110 * ratio,
                            thumbnailHeight = 110 * ratio,

                            // 可能有pedding, ready, uploading, confirm, done.
                            state = 'pedding',

                            // 所有文件的进度信息，key为file id
                            percentages = {},
                            // 判断浏览器是否支持图片的base64
                            isSupportBase64 = ( function() {
   
                                var data = new Image();
                                var support = true;
                                data.onload = data.onerror = function() {
   
                                    if( this.width != 1 || this.height != 1 ) {
                                        support = false;
                                    }
                                }
                                data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
                                return support;
                            } )(),

                            // 检测是否已经安装flash，检测flash的版本
                            flashVersion = ( function() {
   
                                var version;

                                try {
                                    version = navigator.plugins[ 'Shockwave Flash' ];
                                    version = version.description;
                                } catch ( ex ) {
                                    try {
                                        version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
                                                .GetVariable('$version');
                                    } catch ( ex2 ) {
                                        version = '0.0';
                                    }
                                }
                                version = version.match( /\d+/g );
                                return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 );
                            } )(),

                            supportTransition = (function(){
   
                                var s = document.createElement('p').style,
                                    r = 'transition' in s ||
                                            'WebkitTransition' in s ||
                                            'MozTransition' in s ||
                                            'msTransition' in s ||
                                            'OTransition' in s;
                                s = null;
                                re