图片上传

需求：1、只能上传图片

          2、图片小于10M

          3、不同用户身份最多上传图片数不同

          4、展示将要上传的图片

          5、展示图片加载进度

          6、用户可以删除将要上传的图片

function setupAdvertsReplacementPianoPage() {
        var imageIdArray = [],
            imageUrlArray = [],
            defaultHtml = '',
            imageIdLen = 0;

        // 获取 sessionStorage 里面的 imageId 和 imageUrl
        if (sessionStorage.getItem('auditing-replacement-paino-imageId') && sessionStorage.getItem('auditing-replacement-paino-imageUrl')) {
            imageIdArray = JSON.parse(sessionStorage.getItem('auditing-replacement-paino-imageId'));
            imageUrlArray = JSON.parse(sessionStorage.getItem('auditing-replacement-paino-imageUrl'));
            imageIdLen = imageIdArray.length;

            $('.image-ids').val(imageIdArray.join());

            // 将上传的图片添加到页面中
            for (var i = 0; i < imageIdLen; i++) {
                defaultHtml += '<div class="weui-grid item item-' + imageIdArray[i] + '" data-id="' + imageIdArray[i] + '"data-filename=' + imageUrlArray[i] + '"><p class="image"><img src="' + imageUrlArray[i] + '" width="98" height="98" alt=""></p><a class="delete iconfont icon-roundclosefill" href="#"></a></div>';
            }

            $('.upload-images .images').html(defaultHtml);
        }

        //上传图片
        $('.submit-images').on('click', function () {
            var file = $('.img_box').find('.input-file')[0],
                fileNum = file.files.length;

            if (!file.files || !fileNum) {
                $.toast('您还未选择文件！', 'cancel');
                return false;
            }

            if (fileNum > 3) {
                $.alert('您选择的图片超过三张，不能上传哦！');
                return false;
            }

            if (fileNum < 2) {
                if ((file.files[0].size / (1024 * 1024)) > 10) {
                    $.toast("图片大小不能超过10M", "cancel");
                    return false;
                }
            } else {
                for (var i = 0; i < fileNum; i++) {
                    if ((file.files[i].size / (1024 * 1024)) > 10) {
                        $.toast("每张图片大小不能超过10M", "cancel");
                        return false;
                    }
                }
            }
            
        });

        $('.add-images').click(function () {
            if ($('.upload-images .item').length >= 3) {
                $.alert('您已经上传了三张图片，不能再上传啦！');
                return false;
            }
        });

        $('.img_box form').submit(function () {
            var $this = $(this),
                $file = $this.find("input[type=file]"),
                $popup = $this.closest(".popup-add-image"),
                $progress = $popup.find('.progress'),
                $bar = $popup.find('.bar'),
                $percent = $popup.find('.percent'),
                $status = $popup.find('.status'),
                imgLen = $('.upload-images .item').length,
                fileNum = $('.img_box').find('.input-file')[0].files.length;

            if ($('.upload-images .item').length >= 3) {
                $.alert('您已经上传了三张图片，不能再上传啦！');
                return false;
            }

            if (imgLen + fileNum > 3) {
                var restNum = 3 - imgLen;
                $.alert('您已经上传了' + imgLen + '张图片，只能再上传' + restNum + '张图片哦！');
                return false;
            }

            $this.ajaxSubmit({
                beforeSend: function () {
                    var percentVal = '0%';

                    $progress.show();
                    $bar.width(percentVal);
                    $percent.html(percentVal);
                    $status.hide();
                },
                uploadProgress: function (event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';

                    $bar.width(percentVal);
                    $percent.html(percentVal);
                },
                success: function (data) {
                    var percentVal = '100%',
                        dataArr = JSON.parse(data);

                    for (var i = 0; i < dataArr.length; i++) {
                        imageIdArray.push(dataArr[i].id);
                        imageUrlArray.push(dataArr[i].filename);
                    }

                    sessionStorage.setItem('auditing-replacement-paino-imageId', JSON.stringify(imageIdArray));
                    sessionStorage.setItem('auditing-replacement-paino-imageUrl', JSON.stringify(imageUrlArray));
                    $('.image-ids').val(imageIdArray.join());

                    $bar.width(percentVal);
                    $percent.html(percentVal);
                },
                complete: function (xhr) {
                    var dataArr = JSON.parse(JSON.parse(xhr.responseText)),
                        html = '';

                    for (var i = 0; i < dataArr.length; i++) {
                        if (dataArr[i].status === "s") {
                            $status.html("上传成功。").addClass("alert-success").removeClass("alert-error");

                            html = '<div class="weui-grid item item-' + dataArr[i].id + '" data-id="' + dataArr[i].id + '"data-filename=' + dataArr[i].filename + '"><p class="image"><img src="' + dataArr[i].filename + '" width="98" height="98" alt=""></p><a class="delete iconfont icon-roundclosefill" href="#"></a></div>';

                            $(".images").append(html);

                            $.closePopup();
                        } else {
                            $status.html(dataArr[i].message).addClass("alert-error").removeClass("alert-success");
                        }
                    }

                    setTimeout(function () {
                        var percentVal = '0%';

                        $file.val("");
                        $progress.show();
                        $bar.width(percentVal);
                        $percent.html(percentVal);
                        $status.hide();
                    }, 1000);
                },
                error: function () {
                    showNotificationError();
                }
            });

            return false;
        });

        $('.upload-images .images').on('click', '.delete', function () {
            var $this = $(this),
                $images = $this.closest('.images');

            if ($this.hasClass('loading')) {
                return false;
            }

            $this.addClass('loading');

            $.confirm({
                text: '确认删除图片吗？',
                onOK: function () {
                    imageIdArray = [];
                    imageUrlArray = [];

                    $this.closest('.item').remove();

                    $images.find('.item').each(function () {
                        var $item = $(this);
                        imageIdArray.push($item.data('id'));
                        imageUrlArray.push($item.data('filename'));
                    });

                    sessionStorage.setItem('auditing-replacement-paino-imageId', JSON.stringify(imageIdArray));
                    sessionStorage.setItem('auditing-replacement-paino-imageUrl', JSON.stringify(imageUrlArray));
                    $('.image-ids').val(imageIdArray.join());
                },
                onCancel: function () {
                    $this.removeClass('loading');
                }
            });

            return false;
        });

    }

function setupAuditingEditPage() {
        var auditing_edit_type_imageId = '',
            auditing_edit_type_imageUrl = '',
            auditing_edit_imageId = [],
            auditing_edit_imageUrl = [],
            auditing_edit_defaultHtml = '',
            auditing_edit_imageIdArray = [],
            auditing_edit_imageUrlArray = [],
            advertype,
            video_data,
            $videoPanel = $('.video-panel'),
            $videoBtn = $videoPanel.find('.btn-submit'),
            uploader,
            uploadAuth,
            ali_videoid,
            UploadAddress,
            uploadvodTimeoutID;

        // 获取 sessionStorage 里面的 train-title，train-subtitle，train-price 和 train-description 来赋值
        $('.train-title').val(sessionStorage.getItem('train-title') ? sessionStorage.getItem('train-title') : '');
        $('.train-subtitle').val(sessionStorage.getItem('train-subtitle') ? sessionStorage.getItem('train-subtitle') : '');
        $('.train-price').val(sessionStorage.getItem('train-price') ? sessionStorage.getItem('train-price') : '');
        $('.train-description').val(sessionStorage.getItem('train-description') ? sessionStorage.getItem('train-description') : '');

        if (sessionStorage.getItem('video-data') && sessionStorage.getItem('ali-videoid')) {
            video_data = JSON.parse(sessionStorage.getItem('video-data'));

            $('.object-videoid').val(video_data.videoid);
            $('.video-wrap').html('<video width="250" height="150" controls="controls" src="' + video_data.filename + '" poster="' + video_data.coverurl + '"></video>');
        }

        //针对 type 不一样的页面存不一样的 sessionStorage
        advertype = location.search.substr(1).split('&')[0].split('=')[1];
        switch (advertype) {
            case '0':
                auditing_edit_type_imageId = 'auditing_edit_0_imageId';
                auditing_edit_type_imageUrl = 'auditing_edit_0_imageUrl';
                break;
            case "1":
                auditing_edit_type_imageId = 'auditing_edit_1_imageId';
                auditing_edit_type_imageUrl = 'auditing_edit_1_imageUrl';
                break;
            case "2":
                auditing_edit_type_imageId = 'auditing_edit_2_imageId';
                auditing_edit_type_imageUrl = 'auditing_edit_2_imageUrl';
                break;
            default:
                break;
        }

        // 获取sessionStorage里面的imageId和imageUrl
        if (sessionStorage.getItem(auditing_edit_type_imageId) && sessionStorage.getItem(auditing_edit_type_imageUrl)) {
            auditing_edit_imageIdArray = JSON.parse(sessionStorage.getItem(auditing_edit_type_imageId));
            auditing_edit_imageUrlArray = JSON.parse(sessionStorage.getItem(auditing_edit_type_imageUrl));

            $('.object-imageid').val(auditing_edit_imageIdArray.join());

            for (var i = 0; i < auditing_edit_imageIdArray.length; i++) {
                auditing_edit_defaultHtml += '<div class="weui-grid item item-' + auditing_edit_imageIdArray[i] + '" data-id="' + auditing_edit_imageIdArray[i] + '"data-filename=' + auditing_edit_imageUrlArray[i] + '"><p class="image"><img src="' + auditing_edit_imageUrlArray[i] + '" width="98" height="98" alt=""></p><a class="delete iconfont icon-roundclosefill" href="#"></a></div>';
            }

            $('.images').html(auditing_edit_defaultHtml);
        }

        //点击开始上传时，不能上传空图片
        $('.submit-images').on('click', function () {
            var file = $('.img_box').find('.input-image-file')[0],
                fileNum = file.files.length;

            if (!file.files || !fileNum) {
                $.toast('您还未选择文件！', 'cancel');
                return false;
            }

            if ($('.isAdmin').val() === 'value') {
                if (fileNum > 8) {
                    $.alert('您选择的图片超过八张，不能上传哦！');
                    return false;
                }
            } else {
                if (fileNum > 5) {
                    $.alert('您选择的图片超过五张，不能上传哦！');
                    return false;
                }
            }

            if (fileNum < 2) {
                if ((file.files[0].size / (1024 * 1024)) > 10) {
                    $.toast("图片大小不能超过10M", "cancel");
                    return false;
                }
            } else {
                for (var i = 0; i < fileNum; i++) {
                    if ((file.files[i].size / (1024 * 1024)) > 10) {
                        $.toast("每张图片大小不能超过10M", "cancel");
                        return false;
                    }
                }
            }

        });

        //提醒普通用户图片最多上传五张，管理员最多上传八张
        $('.add-images').click(function () {
            if ($('.isAdmin').val() === 'value') {
                if ($('.upload-images .item').length >= 8) {
                    $.alert('您已经上传了八张图片，不能再上传啦！');
                    return false;
                }
            } else {
                if ($('.upload-images .item').length >= 5) {
                    $.alert('您已经上传了五张图片，不能再上传啦！');
                    return false;
                }
            }

        });

        //图片上传是一个单独的表单，监听submit
        $('.img_box form').submit(function () {
            var $this = $(this),
               $file = $this.find("input[type=file]"),
               $popup = $this.closest(".popup-add-image"),
               $progress = $popup.find('.progress'),
               $bar = $popup.find('.bar'),
               $percent = $popup.find('.percent'),
               $status = $popup.find('.status'),
               imgLen = $('.upload-images .item').length,
               fileNum = $('.img_box').find('.input-image-file')[0].files.length;

            if ($('.isAdmin').val() === 'value') {
                if (imgLen >= 8) {
                    $.alert('您已经上传了八张图片，不能再上传啦！');
                    return false;
                }
                if (imgLen + fileNum > 8) {
                    var restNum = 8 - imgLen;
                    $.alert('您已经上传了' + imgLen + '张图片，只能再上传' + restNum + '张图片哦！');
                    return false;
                }
            } else {
                if (imgLen >= 5) {
                    $.alert('您已经上传了五张图片，不能再上传啦！');
                    return false;
                }
                if (imgLen + fileNum > 5) {
                    var restNum = 5 - imgLen;
                    $.alert('您已经上传了' + imgLen + '张图片，只能再上传' + restNum + '张图片哦！');
                    return false;
                }
            }

            $this.ajaxSubmit({
                beforeSend: function () {
                    var percentVal = '0%';

                    $progress.show();
                    $bar.width(percentVal);
                    $percent.html(percentVal);
                    $status.hide();
                },
                uploadProgress: function (event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    $bar.width(percentVal);
                    $percent.html(percentVal);
                },
                success: function (data) {
                    var percentVal = '100%',
                        dataArr = JSON.parse(data);
                    for (var i = 0; i < dataArr.length; i++) {
                        auditing_edit_imageId.push(dataArr[i].id);
                        auditing_edit_imageUrl.push(dataArr[i].filename);
                    }

                    sessionStorage.setItem(auditing_edit_type_imageId, JSON.stringify(auditing_edit_imageId));
                    sessionStorage.setItem(auditing_edit_type_imageUrl, JSON.stringify(auditing_edit_imageUrl));
                    $('.object-imageid').val(auditing_edit_imageId.join());
                    $bar.width(percentVal);
                    $percent.html(percentVal);
                },
                complete: function (xhr) {
                    var dataArr = JSON.parse(JSON.parse(xhr.responseText)),
                        html = '';

                    for (var i = 0; i < dataArr.length; i++) {
                        if (dataArr[i].status === "s") {
                            $status.html("上传成功。").addClass("alert-success").removeClass("alert-error");

                            html = '<div class="weui-grid item item-' + dataArr[i].id + '" data-id="' + dataArr[i].id + '"data-filename=' + dataArr[i].filename + '"><p class="image"><img src="' + dataArr[i].filename + '" width="98" height="98" alt=""></p><a class="delete iconfont icon-roundclosefill" href="#"></a></div>';

                            $('.images').append(html);

                            $.closePopup();
                        } else {
                            $status.html(dataArr[i].message).addClass("alert-error").removeClass("alert-success");
                        }
                    }

                    setTimeout(function () {
                        var percentVal = '0%';

                        $file.val('');
                        $progress.show();
                        $bar.width(percentVal);
                        $percent.html(percentVal);
                        $status.hide();
                    }, 1000);
                },
                error: function () {
                    showNotificationError();
                }
            });

            return false;
        });

        $('.upload-images .images').on('click', '.delete', function () {
            var $this = $(this),
                $images = $this.closest('.images');

            if ($this.hasClass('loading')) {
                return false;
            }

            $this.addClass('loading');

            $.confirm({
                text: '确认删除图片吗？',
                onOK: function () {
                    auditing_edit_imageId = [];
                    auditing_edit_imageUrl = [];

                    $this.closest('.item').remove();

                    $images.find('.item').each(function () {
                        var $item = $(this);
                        auditing_edit_imageId.push($item.data('id'));
                        auditing_edit_imageUrl.push($item.data('filename'));
                    });

                    sessionStorage.setItem(auditing_edit_type_imageId, JSON.stringify(auditing_edit_imageId));
                    sessionStorage.setItem(auditing_edit_type_imageUrl, JSON.stringify(auditing_edit_imageUrl));
                    $('.object-imageid').val(auditing_edit_imageId.join());
                },
                onCancel: function () {
                    $this.removeClass('loading');
                }
            });

            return false;
        });

        uploader = new VODUpload({

            // 开始上传
            'onUploadstarted': function (uploadInfo) {
                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, UploadAddress);
            },

            // 文件上传成功   
            'onUploadSucceed': function () {
                $videoBtn.removeClass('loading');
                $videoBtn.text('开始上传');
                $videoPanel.find('.input-file').val('');

                function uploadvodSuccess() {
                    if (uploadvodTimeoutID) {
                        clearTimeout(uploadvodTimeoutID);
                    }

                    uploadvodTimeoutID = setTimeout(function () {
                        $.ajax({
                            url: getUncachedUrl('/Base/SiteVideoHandler'),
                            type: 'POST',
                            data: {
                                act: 'move_uploadvod_success',
                                videoid: ali_videoid,
                                typeid: $('.video-panel .type-id').val()
                            },
                            success: function (data) {
                                if (data.status === 's') {
                                    $.hideLoading();
                                    sessionStorage.setItem('video-data', JSON.stringify(data));
                                    $('.object-videoid').val(data.videoid);
                                    $('.video-wrap').html('<video width="250" height="150" controls="controls" src="' + data.filename + '" poster="' + data.coverurl + '"></video>');
                                } else {
                                    uploadvodSuccess();
                                }
                            },
                            error: function () {
                                $.hideLoading();
                            }
                        });
                    }, 500);
                }

                $.showLoading('正在处理视频');

                uploadvodSuccess();
            },

            // 文件上传失败
            'onUploadFailed': function () {
                $videoBtn.removeClass('loading');
            },

            // 文件上传进度，单位：字节
            'onUploadProgress': function (uploadInfo, totalSize, uploadedSize) {
                $videoBtn.text(Math.ceil(uploadedSize * 100 / totalSize) + "%");
            },

            // 上传凭证超时
            'onUploadTokenExpired': function () {
                uploader.resumeUploadWithAuth(uploadAuth);
            }
        });

        $videoPanel.find('.input-file').change(function () {
            var userData = '{"Vod":{"UserData":"{"IsShowWaterMark":"false","Priority":"7"}"}}';

            uploader.cleanList();

            for (var i = 0; i < event.target.files.length; i++) {
                uploader.addFile(event.target.files[i], null, null, null, userData);
            }
        });

        $videoPanel.find('.btn-submit').click(function () {
            var filename = $videoPanel.find('.input-file').val().substring($videoPanel.find('.input-file').val().lastIndexOf('\\') + 1);

            if ($videoBtn.hasClass('loading')) {
                return false;
            }

            if (!filename) {
                $.toast('您还未选择文件！', 'cancel');
                return false;
            }

            $videoBtn.addClass('loading');

            $.ajax({
                url: getUncachedUrl('/Base/SiteVideoHandler'),
                type: 'POST',
                data: {
                    act: 'move_uploadvod',
                    filename: filename,
                    typeid: 2
                },
                success: function (data) {
                    uploadAuth = data.UploadAuth;
                    UploadAddress = data.UploadAddress;
                    ali_videoid = data.VideoId;
                    uploader.startUpload();
                    sessionStorage.setItem('ali-videoid', ali_videoid);
                    $('.object-videoid').val(ali_videoid);
                },
                error: function () {
                    $.toast('error', 'cancel');
                }
            });

            return false;
        });
    }

参考资料：http://malsup.com/jquery/form/progress2.html