一个图片上传插件，含图片上传后生成预览图片

发布一个图片上传插件，带图片上传后生成预览图片

插件代码：

/**
 * zx-upload.js v1.0.0
 * 上传插件
 * http://www.*.com/
 *
 * Copyright 2018-2028 zxhj963
 *
 * Released on: 2018/7/21
 */
 ; (function ($, window, document, undefined) {
    "use strict";
    var defaults = {
        isLayer:true,
        maxCount: 5,
        curCount: 0,
        urls: '',
        limitWidth: 500,
        limitHeight: 500,
        viewWidth: 80,
        viewHeight: 80,
        errViewImg:'../images/noimage.gif',
        savePath: '/upload/upload/upload/',
        saveServerUrl: "uploadBase64Img.asp"
    };

    function Upload($ele, options) {
        this.$ele = $ele;
        this.options = $.extend({}, defaults, options);
        console.log(this.options)
        this.init();
    }
    Upload.prototype = {
        constructor: Upload,
        init: function () {
            this.renderViewBox();
            this.bindAddEven();
            this.bindEditEven();
            this.bindDelEven();
        },
        clearViewItem: function () {
            this.$ele.find('.view-item').remove();  //清除所有的view-item
        },
        showUploadBtn: function () {
            this.$ele.children('.zx-view-box').children('label.button').show(); //显示上传按钮
        },
        hideUploadBtn: function () {
            this.$ele.children('.zx-view-box').children('label.button').hide(); //隐藏上传按钮
        },
        resizeImgSize: function (originWidth, originHeight, maxWidth, maxHeight) {
            var targetWidth = originWidth, targetHeight = originHeight;
            if (originWidth > maxWidth || originHeight > maxHeight) {
                if (originWidth / originHeight > maxWidth / maxHeight) {
                    // 更宽，按照宽度限定尺寸
                    targetWidth = maxWidth;
                    targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                } else {
                    targetHeight = maxHeight;
                    targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                }
            }
            else {
                targetWidth = originWidth;
                targetHeight = originHeight;
            }
            return {
                w: targetWidth,
                h: targetHeight
            }
        },
        getImageSize: function (url,callback) {
            var img = new Image();
            img.src = url;
            // 如果图片被缓存，则直接返回缓存数据
            if (img.complete) {
                var ret =  {
                    w: img.width,
                    h: img.height
                };
                callback(ret)
            } else {
                // 完全加载完毕的事件
                img.onload = function () {
                    var ret = {
                        w: img.width,
                        h: img.height
                    };
                    callback(ret)
                }
            }
            return ret;
        },
        getImgUrlBase64: function (imageObj, targetSize) {
            var canvas = document.createElement('canvas');
            //创建预览图片
            canvas.width = targetSize.w;
            canvas.height = targetSize.h;
            var ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, canvas.width, canvas.height);         // 清除画布
            ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
            var Img64 = canvas.toDataURL();   // 压缩后的base64串
            return Img64;
        },
        getInputUrls: function () {
            //获取文本框中的链接和链接数量
            var that = this,
                urls = that.$ele.children('input.zx-urlInput').val(),
                urls_arr = urls.split(','),
                counts = (urls == '') ? 0 : urls_arr.length,
                maxCount = this.options.maxCount;
            if (counts >= maxCount) {
                var temp_arr = [];
                urls_arr.forEach(function (e, i) {
                    if (i < maxCount) { temp_arr.push(e); }
                });
                urls = temp_arr.join(',');
                counts = maxCount;
                that.hideUploadBtn();
            }
            else {
                that.showUploadBtn();
            }
            that.$ele.children('input.zx-urlInput').val(urls);
            return {
                urls: urls,
                counts: counts
            };
        },
        renderViewBox: function () {
            var that = this;
            that.clearViewItem(); 
            var curUrls = that.getInputUrls().urls;
            var curCount = that.getInputUrls().counts;
            if (curCount > 0) {
                var arr_Urls = curUrls.split(',');
                arr_Urls.forEach(function (e, i) {
                    if (i < that.options.maxCount) {
                        var viewImg64 = that.options.errViewImg;
                        var viewItemHtml = '<div class="view-item"><img src="' + viewImg64 + '" /><div class="admin-box"><a href="javascript:void(0);"  class="edit-btn" data-inputName="pic_1">编辑</a> | <a href= "javascript:void(0);"  class="del-btn" >删除</a></div></div>';
                        that.$ele.children('.zx-view-box').append(viewItemHtml);
                        //e为文本框中的图片链接地址,需转换成viewImg64的预览图片地址
                        that.getImageSize(e, function (ret) {
                            var viewImg64Size = that.resizeImgSize(ret.w, ret.h, that.options.viewWidth, that.options.viewHeight);
                            var imgView = new Image();
                            imgView.src = e;
                            imgView.onload = function () {
                                var viewImg64 = '';
                                if (imgView.fileSize > 0 || (imgView.width > 0 && imgView.height > 0)) {
                                    viewImg64 = that.getImgUrlBase64(imgView, viewImg64Size)
                                } else {
                                    viewImg64 = that.options.errViewImg;
                                }
                                that.$ele.children('.zx-view-box').find('.view-item').eq(i).children('img').attr('src', viewImg64);
                            }
                        });
                    } else {
                    }
                });
            }
        },
        bindAddEven: function () {
            var that = this; 
            var newUrls = '', msg='';
            that.$ele.children('.zx-view-box').on('change', '.zx-fileInput', function () {
                var curUrls = that.getInputUrls().urls;
                var curCount = that.getInputUrls().counts;
                newUrls = curUrls;
                if (curCount >= that.options.maxCount) {
                    return false;
                }
                else {
                    var file = this.files[0];
                    var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
                    if (!rFilter.test(file.type)) {
                        if (that.options.isLayer) {
                            msg = '数据错误，提交的数据不是文件！';
                            if (that.options.isLayer) {
                                layer.alert(msg, { icon: 2 });
                            } else {
                                alert(msg);
                            }
                        } else {
                            msg = '文件格式不正确！';
                            if (that.options.isLayer) {
                                layer.alert(msg, { icon: 2 });
                            } else {
                                alert(msg);
                            }
                        }
                        return false;
                    }
                    else {
                        if (!!file) {
                            //是图片文件，开始上传到服务器
                            var reader = new FileReader();
                            reader.readAsDataURL(file);  // 图片文件转换为base64
                            reader.onload = function () {   // 文件加载完成
                                var def_url = this.result;  //图片原图的base64链接  
                                var image = new Image();
                                image.src = def_url;
                                image.onload = function () {
                                    var originWidth = this.width, originHeight = this.height;   // 图片原始尺寸
                                    var limitWidth = that.options.limitWidth, limitHeight = that.options.limitHeight;    // 保存图片的最大尺寸限制
                                    var targetSize = that.resizeImgSize(originWidth, originHeight, limitWidth, limitHeight);   // 图片尺寸超过限制，调整尺寸
                                    var targetImg64 = that.getImgUrlBase64(image, targetSize);
                                    var formData = new FormData();
                                    formData.append("imgUrl", targetImg64);
                                    formData.append("savePath", that.options.savePath);
                                    $.ajax({
                                        type: "POST",
                                        url: that.options.saveServerUrl, 
                                        data: formData,
                                        dataType: "json", //声明成功使用json数据类型回调
                                        //如果传递的是FormData数据类型，那么下来的三个参数是必须的，否则会报错
                                        cache: false,  //默认是true，但是一般不做缓存
                                        processData: false, //用于对data参数进行序列化处理，这里必须false；如果是true，就会将FormData转换为String类型
                                        contentType: false,  //一些文件上传http协议的关系，自行百度，如果上传的有文件，那么只能设置为false
                                        success: function (ret) {  //请求成功后的回调函数
                                            if (ret.code == 200) {
                                                msg = '<span class="icon-check"> 上传成功！</div>';
                                                if (that.options.isLayer) {
                                                    layer.msg(msg, {area:['','46px'], title: false });
                                                } else {
                                                    alert(msg);
                                                }
                                                var imgUrl = ret.msg;
                                                //将上传成功后返回得到的链接添加到当前urls的后面
                                                newUrls = (curUrls == "") ? imgUrl : (newUrls + "," + imgUrl);
                                                that.$ele.children('input.zx-urlInput').val(newUrls);  //更新文本框的值

                                                //生成缩略图
                                                var imageView = new Image();
                                                imageView.src = imgUrl;
                                                imageView.onload = function () {
                                                    var viewSize = that.resizeImgSize(originWidth, originHeight, that.options.viewWidth, that.options.viewHeight);
                                                    var viewImg64 = that.getImgUrlBase64(imageView, viewSize);
                                                    var viewItemHtml = '<div class="view-item"><img src="' + viewImg64 + '" /><div class="admin-box"><a href="javascript:void(0);"  class="edit-btn" data-inputName="pic_1">编辑</a> | <a href= "javascript:void(0);"  class="del-btn" >删除</a></div></div>';
                                                    that.$ele.children('.zx-view-box').append(viewItemHtml);
                                                    if (that.getInputUrls().counts >= that.options.maxCount) {
                                                        that.hideUploadBtn();
                                                    }
                                                    else {
                                                        return false;
                                                    }
                                                };                                                
                                            }
                                            else {
                                                msg = '上传失败！';
                                                if (that.options.isLayer) {
                                                    layer.alert(msg, { icon: 2 });
                                                } else {
                                                    alert(msg);
                                                }
                                            }
                                        }
                                    });
                                }
                            }
                        }
                        else {
                            return false;
                        }
                    }




                }
            });
        },
        bindEditEven: function () {
            var that = this;
            that.$ele.children('.zx-view-box').on('click', '.edit-btn', function () {
                var msg = '编辑功能开发中。。。！';
                if (that.options.isLayer) {
                    layer.alert(msg, { icon: 2 });
                } else {
                    alert(msg);
                }
            });
        },
        bindDelEven: function () {
            var that = this;
            var newUrls = '';
            that.$ele.children('.zx-view-box').on('click', '.del-btn', function () {
                //删除当前预览项
                var index = $(this).parents('.view-item').index();  //当前item的序号；用于删除input当中的值
                var curUrls = that.getInputUrls().urls;
                var curCount = that.getInputUrls().counts;
                if (curCount > 0) {
                    var urls_arr = curUrls.split(',');
                    var temp_arr = [];
                    urls_arr.forEach(function (e, i) {
                        if (i != index - 1) { temp_arr.push(e); }
                        else { }
                    });
                    newUrls = temp_arr.join(','); 
                    $(this).parents('.view-item').remove();
                } else {
                    newUrls = '';
                }
                that.showUploadBtn();
                that.$ele.children('input.zx-urlInput').val(newUrls);
            });
        }
    };

    $.fn.ZX_upload = function (options) {
        options = $.extend(defaults, options || {});    //合并对象
        return new Upload($(this), options);
    }
})(jQuery, window, document);

先贴上代码！
插件使用方法：

本插件需要依赖jquery库，我用的是jquery-1.12.4.js，另外layer插件可以按您的需要引用，也可以不引用，但是如果options的参数中的isLayer如果设置为true时，则必须引入layer库

先引用jquery.js库，我用的是jquery-1.12.4.js,
再引入layer.js库
再引入pintuer UI,不引用则需要按实际需要调整样式；

项目中调用插件方法：

    <script type="text/javascript" src="../js/jquery.zx-upload.js"></script>
    <script type="text/javascript">
        $(function () {
            var upload1 = $('.upload-box-1').ZX_upload({
                maxCount: 1
            });
            var upload2 = $('.upload-box-2').ZX_upload({
                maxCount: 5
            });

        });

    </script>

缺点：图片不能多张图片上传，每次只能上传一张图片。

**特别注意**
1. 上传图片的接口，是以二进制流的格式传递的，所以在获取数据时要注意。（ASP后台建议使用各类无组件文件上传类,如：AnUpLoad上传类等，有需要的可以给我留言）
2. 文件上传接口需要提供的数据格式为json格式，上传成功需要得到{code:200,msg:""}，msg中为上传后的图片链接，如果上传失败，则需要将code给成其他值既可以。

Mark: 2018/7/21 18:05 因时间关系 编辑功能 还在开发中。