jquery 上传图片

1.引入html5uploder.css文件：

@charset "utf-8";
/* CSS Document */
.uploader-filename {
    margin: 0 10px;
}

.uploader-progress {
    margin: 0 10px;
}

.uploadfile {
    width: 0;
}

.filelist li {
    list-style-type: none;
    margin-top: 10px;
}

.filelist {
    padding: 0;
}

/*.uploadbtn,.delfilebtn,.uploadfilebtn{*/
/*display:inline-block;*/
/*border:1px solid #999;*/
/*line-height:24px;*/
/*border-radius:2px;*/
/*padding:0 18px;*/
/*font-size:12px;*/
/*color:#666;*/
/*cursor:pointer;*/
/*background:url(../imgs/html5uploader/btnbg.png) repeat-x 0 0;*/
/*text-decoration:none;*/
/*}*/
.filename, .progressnum, .delfilebtn, .uploadbtn {
    font-size: 12px;
    color: #666;
    margin-left: 10px;
}

.progress {
    display: inline-block;
    width: 98%;
    height: 10px;
    background-color: white;
    border-radius: 20px;
    border: 2px groove #666;
    vertical-align: middle;
    padding: 0 2px;
}

.progressbar {
    width: 0;
    height: 9px;
    border-radius: 20px;
    background: url(../imgs/html5uploader/jdt.png) repeat-x center;
}

2.引入jquery.js文件及

html5uploder.js文件代码如下：

/*
 html5uploader V1.0
 author:吕大豹
 date:2013.2.21
 */
console.log(typeof(XMLHttpRequest));
console.log(typeof(window.ActiveXObject));
function CreateXMLHttp() {
    try {
        xmlHttp = new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象，除 IE 外的浏览器都支持这个方法。
    } catch (e) {
        try {
            xmlHttp = ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象（Msxml2.XMLHTTP）。
        } catch (e) {
            try {
                xmlHttp = ActiveXobject("Microsoft.XMLHTTP");//使用较老版本的 IE 创建 IE 兼容的对象（Microsoft.XMLHTTP）。
            } catch (failed) {
                xmlHttp = false;//如果失败了还保持false
            }
        }
    }
    return xmlHttp;
}
//if (typeof(XMLHttpRequest) != "function" && typeof(window.ActiveXObject) != "undefined") {
//    function XMLHttpRequest() {
//        var xmlhttp_arr = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
//        var xmlhttp;
//        for (i = 0; i < xmlhttp_arr.length; i++) {
//            if (xmlhttp = new ActiveXObject(xmlhttp_arr[i]))
//                break;
//        }
//        return xmlhttp;
//    }
//}
(function ($) {
    $.fn.html5uploader = function (opts) {
        var defaults = {
            fileTypeExts: '*/*',//允许上传的文件类型，填写mime类型
            url: '',//文件提交的地址
            auto: false,//自动上传
            multi: true,//默认允许选择多个文件
            buttonText: '选择文件',//上传按钮上的文字
            removeTimeout: 1000,//上传完成后进度条的消失时间
            itemTemplate: '<li id="${fileID}' + opts.name + '"><span class="uploader-filename">${fileName} (${fileSize})</span><img class="uploader-loading" src="/imgs/loading.gif" /><span class="uploader-progress"></span></li>',//上传队列显示的模板,最外层标签使用<li>
            onUploadStart: function () {
            },//上传开始时的动作
            onUploadSuccess: function () {
            },//上传成功的动作
            onUploadComplete: function () {
            },//上传完成的动作
            onUploadError: function () {
            }, //上传失败的动作
            onInit: function () {
            }//初始化时的动作
        }
        var option = $.extend(defaults, opts);
        //将文件的单位由bytes转换为KB或MB
        var formatFileSize = function (size) {
            if (size > 1024 * 1024) {
                size = (Math.round(size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
            }
            else {
                size = (Math.round(size * 100 / 1024) / 100).toString() + 'KB';
            }
            return size;
        }
        //根据文件序号获取文件
        var getFile = function (index, files) {
            for (var i = 0; i < files.length; i++) {
                if (files[i].index == index) {
                    return files[i];
                }
            }
            return false;
        }
        //将文件类型格式化为数组
        var formatFileType = function (str) {
            if (str) {
                return str.split(",");
            }
            return false;
        }
        this.each(function () {
            var _this = $(this);
            //先添加上file按钮和上传列表
            var inputstr = '<input class="uploadfile" style="visibility:hidden;height:1px;" type="file" accept="' + option.fileTypeExts + '"';
            if (option.multi) {
                inputstr += 'multiple';
            }
            inputstr += '/>';
            inputstr += '<a href="javascript:void(0)" class="uploadfilebtn btn btn-sm btn-success">';
            inputstr += option.buttonText;
            inputstr += '</a>';
            var fileInputButton = $(inputstr);
            var uploadFileList = $('<ul class="filelist"></ul>');
            _this.append(fileInputButton, uploadFileList);
            //创建文件对象
            var ZXXFILE = {
                fileInput: fileInputButton.get(0),//html file控件
                upButton: null,//提交按钮
                url: option.url,//ajax地址
                fileFilter: [],//过滤后的文件数组
                filter: function (files) {//选择文件组的过滤方法
                    var arr = [];
                    var typeArray = formatFileType(option.fileTypeExts);
                    if (!typeArray) {
                        for (var i in files) {
                            if (files[i].constructor == File) {
                                arr.push(files[i]);
                            }
                        }
                    }
                    else {
                        for (var i in files) {
                            if (files[i].constructor == File) {
//                                for (var j in files[i]) {
//                                    console.log('file.' + j + ' = ' + files[i][j]);
//                                }
                                if (files[i].type == '' || $.inArray(files[i].type, typeArray) >= 0) {
                                    arr.push(files[i]);
                                }
                                else {
                                    alert('文件类型不允许！');
                                    fileInputButton.val('');
                                }
                            }
                        }
                    }
                    return arr;
                },
                //文件选择后
                onSelect: option.onSelect || function (files) {
                    for (var i = 0; i < files.length; i++) {
                        var file = files[i];
                        var html = option.itemTemplate;
                        console.log(file);
                        //处理模板中使用的变量
                        html = html.replace(/\${fileID}/g, file.index).replace(/\${fileName}/g, file.name).replace(/\${fileSize}/g, formatFileSize(file.size));
                        uploadFileList.append(html);
                        //判断是否是自动上传
                        if (option.auto) {
                            ZXXFILE.funUploadFile(file);
                        }
                    }
                    //如果配置非自动上传，绑定上传事件
                    if (!option.auto) {
                        _this.find('.uploadbtn').die().on('click', function () {
                            var index = parseInt($(this).parents('li').attr('id'));
                            ZXXFILE.funUploadFile(getFile(index, files));
                        });
                    }
                    //为删除文件按钮绑定删除文件事件
                    _this.find('.delfilebtn').on('click', function () {
                        var index = parseInt($(this).parents('li').attr('id'));
                        ZXXFILE.funDeleteFile(index);
                    });
                },
                //文件删除后
                onDelete: function (index) {
                    if (option.removeTimeout) {
                        setTimeout(function () {
                            $('#' + index + option.name).fadeOut().remove();
                        }, option.removeTimeout);
                    } else {
                        _this.find('#' + index + option.name).fadeOut().remove();
                    }
                },
                onProgress: function (file, loaded, total) {//文件上传进度
                    var eleProgress = _this.find('#' + file.index + option.name + ' .uploader-progress'),
                        percent = (loaded / total * 100).toFixed(0) + '%';
                    if (total - loaded < 500000) {//解决四舍五入误差
                        loaded = total;
                    }
                    eleProgress.html(percent);
                },
                onUploadSuccess: option.onUploadSuccess,        //文件上传成功时
                onUploadError: option.onUploadError,        //文件上传失败时,
                onUploadComplete: option.onUploadComplete,        //文件全部上传完毕时
                /* 开发参数和内置方法分界线 */

                //获取选择文件，file控件或拖放
                funGetFiles: function (e) {

                    // 获取文件列表对象
                    var files = e.target.files || e.dataTransfer.files;
                    console.log(files);
                    //继续添加文件
                    files = this.filter(files)
                    this.fileFilter.push(files);
                    this.funDealFiles(files);
                    return this;
                },
                //选中文件的处理与回调
                funDealFiles: function (files) {
                    var fileCount = _this.find('.filelist li').length;//队列中已经有的文件个数
                    for (var i = 0; i < this.fileFilter.length; i++) {
                        for (var j = 0; j < this.fileFilter[i].length; j++) {
                            var file = this.fileFilter[i][j];
                            //增加唯一索引值
                            file.index = ++fileCount;
                        }
                    }
                    //执行选择回调
                    this.onSelect(files);
                    return this;
                },
                //删除对应的文件
                funDeleteFile: function (index) {
                    for (var i = 0; i < this.fileFilter.length; i++) {
                        for (var j = 0; j < this.fileFilter[i].length; j++) {
                            var file = this.fileFilter[i][j];
                            if (file.index == index) {
                                this.fileFilter[i].splice(j, 1);
                                this.onDelete(index);
                            }
                        }
                    }
                    return this;
                },
                //文件上传
                funUploadFile: function (file) {
                    var self = this;
                    (function (file) {
//                        var xhr = new XMLHttpRequest();
                        var xhr = new CreateXMLHttp();
                        console.log('xhr Create');
                        if (xhr.upload) {
                            // 上传中
                            if (xhr.upload.addEventListener) {
                                xhr.upload.addEventListener("progress", function (e) {
                                    console.log('uploaded = ' + e.loaded + ' / ' + e.total);
                                    self.onProgress(file, e.loaded, e.total);
                                }, false);
                            } else if (xhr.upload.atachEvent) {
                                xhr.upload.atachEvent("progress", function (e) {
                                    console.log('uploaded = ' + e.loaded + ' / ' + e.total);
                                    self.onProgress(file, e.loaded, e.total);
                                });
                            }
//                            xhr.addEventListener("progress", function (e) {
//                                console.log('downloaded = ' + e.loaded + ' / ' + e.total);
//                            });
                            // 文件上传成功或是失败
                            console.log('XMLHttpRequest onreadystatechange');
                            xhr.onreadystatechange = function (e) {
                                console.log('xhr.readyState = ' + xhr.readyState);
                                if (xhr.readyState == 4) {
                                    if (xhr.status == 200) {
                                        self.onUploadSuccess(file, xhr.responseText);
                                        self.onDelete(file.index);
                                        self.onUploadComplete();
                                    } else {
                                        self.onDelete(file.index);
                                        self.onUploadError(file, xhr.responseText);
                                    }
                                }
                            };
                            console.log('onUploadStart');
                            option.onUploadStart();
                            // 开始上传
                            xhr.open("POST", self.url, true);
                            console.log('xhr.open');
//                            xhr.setRequestHeader("X_FILENAME", file.name);
                            xhr.send(file);
                            console.log('xhr.send');
                        }
                    })(file);
                },
                init: function () {
                    var self = this;
                    //文件选择控件选择
                    if (this.fileInput) {
//                        $(this.fileInput).on('change', function (e) {
//                            self.funGetFiles(e);
//                        });
                        if (this.fileInput.addEventListener) {
                            this.fileInput.addEventListener("change", function (e) {
                                self.funGetFiles(e);
                            }, false);
                        } else if (this.fileInput.attachEvent) {
                            this.fileInput.attachEvent("change", function (e) {
                                self.funGetFiles(e);
                            });
                        }
                    }
                    //点击上传按钮时触发file的click事件
                    _this.find('.uploadfilebtn').on('click', function () {
                        _this.find('.uploadfile').trigger('click');
                    });
                    option.onInit();
                }
            };
            //初始化文件对象
            ZXXFILE.init();
        });
    }
})(jQuery)

3.调用：

<script type="text/javascript">

    $(document).ready(function () {
        $('#modal_list_uploader').html5uploader({
            name: 'list',
            auto: true,
            multi: false,
            removeTimeout: 100,
            buttonText: '选择图片',
            url: '/goods/up_list_img',
            fileTypeExts: 'image/jpeg,image/png,image/webp',
            onInit: function () {
            },
            onUploadStart: function () {
            },
            onUploadSuccess: function (file, res) {
                console.log(res);
                $('#form_img').val(res);
                $('#form_img_preview').html('<img src="' + res + '" />');
            },
            onUploadError: function (file, res) {
                alert(res);
            },
            onUploadComplete: function () {
            }
        });


    })
</script>

4.html代码：

<div class="form-group">
        <label for="form_img">* 商品图</label>

        <div id="modal_list_uploader"></div>

        <input id="form_img" type="hidden" name="img" value=""/>

        <input id="goodId" type="hidden" name="goodId" value="<?php echo $goodAR->id; ?>"/>

        <div id="form_img_preview"><?php if ($goodAR->img != '') { ?><img
                src="<?php echo $goodAR->img; ?>" /><?php } ?></div>

 </div>

4.php服务器端：

1）

public function upListImgAction()
    {
        $imageStream = file_get_contents('php://input');

        $imageArr = System_Module_UploadImage::saveStream($imageStream, 'tmp');

        System_Tool_Image::thumb($imageArr['path'], $imageArr['path'], 112, 89);

        echo $imageArr['url'];
    }

public static function saveStream($stream, $folder)
    {
        self::$saveFolder = $folder;

        //如果当前表单的文件字段中有值，而且是有效值
        if (!empty($stream)) {
            $imageArr = self::createImageByStream($stream);
        } else {
            throw new SysException(System_Lib_ErrorMessage::SAVE_MEDIA_FILE_ERROR);
        }

        return $imageArr;
    }

public static function thumb($src, $tar, $width, $height, $opacity = 100)
    {
        list($srcWidth, $srcHeight) = getimagesize($src);

        if ($srcWidth == $width && $srcHeight == $height) {
            if ($src == $tar) {
                return true;
            } else {
                return System_Lib_File::copy($src, $tar);
            }
        }

        $rate = $width / $height;

        System_Lib_Log::trace(get_class() . '::thumb()', "$srcWidth, $srcHeight, $width, $height, $rate");

        if ($srcWidth / $srcHeight > $rate) {
            $srcX     = floor(($srcWidth - $srcHeight * $rate) / 2);
            $srcY     = 0;
            $srcWidth = $srcHeight * $rate;
        } else {
            $srcX      = 0;
            $srcY      = floor(($srcHeight - $srcWidth / $rate) / 2);
            $srcHeight = $srcWidth / $rate;
        }

        System_Lib_Log::trace(get_class() . '::thumb()', "$srcWidth, $srcHeight, $width, $height, $srcX, $srcY");

        if (function_exists("imagecreatetruecolor")) {
            $new_img = self::createImage($src);

            $thumb_img = imagecreatetruecolor($width, $height);

            System_Lib_Log::trace(get_class() . '::thumb()', "$srcX, $srcY, $width, $height, $srcWidth, $srcHeight");

            if (!imagecopyresampled($thumb_img, $new_img, 0, 0, $srcX, $srcY, $width, $height, $srcWidth, $srcHeight)) {
                return false;
            } else {
                imagejpeg($thumb_img, $tar, $opacity);
                imagedestroy($thumb_img);
            }
        } else {
            return false;
        }

        return true;
    }

2）

public function ajaxAddAction()
    {
       $img       = $this->getParam('img', 'String');

        System_Lib_App::app()->pdo('db')->beginTransaction();

        try {

            $goodArr = array();
            //移动列表图片
            list($imgPath, $imgUrl) = System_Module_ServeGoods::removeListFile($img);

            $goodArr = array_merge($goodArr, array(
                'img' => $imgUrl
            ));

            //保存商品
            $goodsAR = System_Module_ServeGoods::add($goodArr);

            //事务提交
            System_Lib_App::app()->pdo('db')->commit();
        } catch (Exception $e) {
            //事务回滚
            System_Lib_App::app()->pdo('db')->rollback();

            throw new SysException($e->getCode());
        }
        $this->ajaxSuccess();
    }

public static function removeListFile($tmpFile)
    {
        $root    = System_Lib_App::app()->getConfig('mediaRoot');
        $webRoot = System_Lib_App::app()->getConfig('mediaWebRoot');

        $tmpFile = str_replace($webRoot, $root, $tmpFile);

        $res = System_Module_UploadImage::removeTmpFile($tmpFile, 'serve.image');

        return $res;
    }

public static function removeTmpFile($tmpFile, $folderName)
    {
        $root     = System_Lib_App::app()->getConfig('mediaRoot');
        $webRoot  = System_Lib_App::app()->getConfig('mediaWebRoot');
        $fileName = System_Tool_Hex::hex10to64(time() . rand(1000, 9999));

        $path = '/' . $folderName . date('/Y-m/d/') . $fileName . '.jpg';

        //把源文件移动为目标文件（相当于剪切->黏贴 操作）
        if (!System_Lib_File::copy($tmpFile, $root . '/' . $path)) {
            throw new SysException(System_Lib_ErrorMessage::SAVE_MEDIA_FILE_ERROR);
        }

        return array(
            $root . $path,
            $webRoot . $path
        );
    }

public static function copy($src, $tar)
    {
        if (!file_exists($src)) {
            return false;
        }
        $dir = dirname($tar);
        if (!file_exists($dir)) {
            if (!self::createDir($dir)) {
                return false;
            }
        }

        return copy($src, $tar);
    }

posted @ 2015-12-01 16:54 SilverWang 阅读(318) 评论(0) 收藏举报

刷新页面返回顶部

SilverWang

jquery 上传图片

公告