当前位置: 首页 > 工具软件 > weui.js > 使用案例 >

WEUI.js uploader图片上传

狄钧
2023-12-01

weui.js下载地址:

https://github.com/Tencent/weui.js/blob/master/docs/component/uploader.md

HTML:

<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <!--<div class="weui-cell__hd"><label class="weui-label">主题</label></div>-->
        <div class="weui-cell__bd">
            <input class="weui-input" id="title" type="text" placeholder="主题"/>
        </div>
    </div>
    <div class="weui-cell">
        <!--<div class="weui-cell__hd"><label class="weui-label">地点</label></div>-->
        <div class="weui-cell__bd">
            <input class="weui-input" id="location" type="text" placeholder="地点"/>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <textarea class="weui-textarea" id="description" placeholder="这一刻的想法..." rows="3"></textarea>
            <!--<div class="weui-textarea-counter"><span>0</span>/200</div>-->
        </div>
    </div>
    <div class="weui-gallery" id="gallery">
        <span class="weui-gallery__img" id="galleryImg"></span>
        <div class="weui-gallery__opr">
            <a href="javascript:" class="weui-gallery__del">
                <i class="weui-icon-delete weui-icon_gallery-delete"></i>
            </a>
        </div>
    </div>
    <div class="weui-cell" id="uploader">
        <div class="weui-cell__bd">
            <div class="weui-uploader">
                <!--<div class="weui-uploader__hd">-->
                <!--<p class="weui-uploader__title">图片上传</p>-->
                <!--<div class="weui-uploader__info">0/2</div>-->
                <!--</div>-->
                <div class="weui-uploader__bd">
                    <ul class="weui-uploader__files" id="uploaderFiles">

                    </ul>
                    <div class="weui-uploader__input-box ">
                        <!--<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/jpg,image/jpeg,image/png" />-->
                        <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/jpg,image/jpeg,image/png" multiple="multiple"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript:

​
$(function(){
        //loading提示
        var $loadingToast = $('#loadingToast');

        //weui弹框事件
        var $iosDialog2 = $('#iosDialog2');
        var $dialogbd = $('.weui-dialog__bd')
        $('#dialogs').on('click', '.weui-dialog__btn', function(){
            $(this).parents('.js_dialog').fadeOut(200);
        });

        function unique1(arr){
            var newArr = [];//新建一个数组
            for(var i=0,len=arr.length;i<len;i++){
                if(newArr.indexOf(arr[i]) == -1){//若新数组中未包含该项则将其存入新数组
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        var uploadCount = 0;
        var uploadCustomFileList = [];
        var countA= [];
        weui.uploader('#uploader', {
            url: '/growthInfo/upload',
            auto: false,
            type: 'file',
            compress: {
                width: 1600,
                height: 1600,
                quality: .8
            },
            onBeforeQueued: function(files) {
                // `this` 是轮询到的文件, `files` 是所有文件
                countA=[];
                if(["image/jpg", "image/jpeg", "image/png"].indexOf(this.type) < 0){
                    weui.alert('请上传正确的图片类型(jpg/jpeg/png)');
                    return false; // 阻止文件添加
                }
                if(this.size > 20 * 1024 * 1024){
                    weui.alert('请上传不超过20M的图片');
                    return false;
                }
                if (files.length > 9) { // 防止一下子选择过多文件
                    weui.alert('一次只能上传9张图片,请重新选择');
                    return false;
                }
                if (uploadCount + 1 > 9) {
                    weui.alert('最多只能上传9张图片');
                    return false;
                }

                ++uploadCount;
                // return true; // 阻止默认行为,不插入预览图的框架
            },
            onQueued: function(){
                uploadCustomFileList.push(this);
                // console.log(this.status); // 文件的状态:'ready', 'progress', 'success', 'fail'
                // console.log(this.base64); // 如果是base64上传,file.base64可以获得文件的base64

                // this.upload(); // 如果是手动上传,这里可以通过调用upload来实现;也可以用它来实现重传。
                // countA.push(this.id)

                // this.stop(); // 中断上传

                // return true; // 阻止默认行为,不显示预览图的图像
            },
            onBeforeSend: function(data, headers){

                // $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数
                // $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部

                // return false; // 阻止文件上传
            },
            onProgress: function(procent){

                // return true; // 阻止默认行为,不使用默认的进度显示
            },
            onSuccess: function (ret) {
                countA.push(ret.data)
                // return true; // 阻止默认行为,不使用默认的成功态
            },
            onError: function(err){
                // return true; // 阻止默认行为,不使用默认的失败态
            }
        });

        var $gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
            $uploaderFiles = $("#uploaderFiles");
        var index; //第几张图片
        $uploaderFiles.on("click", "li", function(){
            index = $(this).index();
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.fadeIn(100);
        });

        $gallery.on("click", function(){
            $gallery.fadeOut(100);
        });
        //删除图片
        $(".weui-gallery__del").click(function(e) {
            var target = e.target;
            var id = target.getAttribute('data-id');
            for (var i = 0, len = uploadCustomFileList.length; i < len; ++i) {
                var file = uploadCustomFileList[i];
                if (file.id == id) {
                    index = i;
                    break;
                }
            }
            uploadCustomFileList.splice(index, 1);
            $uploaderFiles.find("li").eq(index).remove();
            uploadCount = uploadCount-1
        });
        //点击提交事件
        var flag = true;

        //弹出式提示
        var $toast = $('#toast');
        var $toastContent = $('.weui-toast__content');

        $('#submit').click(function(){

            var title = $.trim($('#title').val());
            var description = $.trim($('#description').val());
            var location = $.trim($('#location').val())
            if( title =='' || description =='' || location ==''){
                weui.alert('请填写相关信息!');
                return
            }else if(/[@#\>\<]+/g.test(title) || /[@#\>\<]+/g.test(description) || /[@#\>\<]+/g.test(location)){
                weui.alert('请不要输入非法字符!');
                return
            }
            weui.confirm('是否确认提交', {
                title: '提示框',
                buttons: [{
                    label: '取消',
                    type: 'default',
                    onClick: function () {

                    }
                }, {
                    label: '确定',
                    type: 'primary',
                    onClick: function () {
                        $loadingToast.fadeIn(100)
                        var promise = new Promise(function (resolve, reject) {
                            uploadCustomFileList.forEach(function (file) {
                                file.upload();
                            });
                            setInterval(function () {
                                if (uploadCustomFileList.length == countA.length) {
                                    resolve()
                                }
                            }, 0);

                        });
                        promise.then(function() {
                            //拿取照片事件
                            // var photos = [];
                            // $('.hidden-img-url').each(function(){
                            //     photos.push($(this).val())
                            // })
                            var postData = {
                                title: $('#title').val(),
                                description: $('#description').val(),
                                location: $('#location').val()
                            }
                            postData.photos = countA.join(',')
                            postData.videos = ''
                            // if(flag) {
                            //     flag = false;
                            $.ajax({
                                type: 'POST',
                                url: '/growthInfo/save',
                                data: postData,
                                dataType: 'JSON',
                                success: function (res) {
                                    if (res.code == 0) {
                                        $loadingToast.fadeOut(100)
                                        $toast.fadeIn(100);
                                        $toastContent.html('发布成功!')
                                        setTimeout(function () {
                                            $toast.fadeOut(100);

                                            history.back();
                                        }, 2000);
                                    } else {

                                        $toast.fadeIn(100);
                                        $toastContent.html(res.msg)
                                        setTimeout(function () {
                                            $toast.fadeOut(100);
                                        }, 2000);
                                    }
                                    return false
                                }
                            });


                        })
                    }
                }]
            });



            // }
        })


    });

​
 类似资料: