webupload多文件的上传

前端页面:

<li class="mui-table-view-cell">
    <p>营业执照</p>

    <div class="liBox">
        <div class="img" style="width: 100%">
            <div class="photo">
                <div class="photoInner">
                    <img src="__STATIC__/api/image/uploadPhoto/takePhoto.png" alt=""
                         class="tianjiaImg"/>

                </div>
            </div>
            <img src="__STATIC__/api/image/editImg.png" class="editImg"/>
            <div class="upload-img " data-up="img1" data-aa=1></div>
        </div>
    </div>
</li>

javascript代码:

 
 
<script>
    var  aa=6;
    var normal_class = '';
    $('.img').on('click', function () {
        normal_class = $(this).find('.upload-img').attr('data-up');
        aa = $(this).find('.upload-img').attr('data-aa');

    });

    //图片上传
    $(function () {

        var pending;
        //最大上传的照片数
        var maxUpload = 5;
        var uploadCount = 0;
        var uploader = WebUploader.create({
            pick: '.img',
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },
            thumb: false,
            compress: {
                width: 1000,
                height: 1000,
                quality: 90,
                allowMagnify: false,
                crop: false,
                preserveHeaders: true,
                noCompressIfLarger: false,
                compressSize: 0
            },
            auto: true,
            //formData: null,
            fileVal: 'file',
            duplicate: false,
            server: '{:url("upload_cmp_img")}',
        });

        uploader.on('beforeFileQueued', function() {
            /* if(uploadCount >= maxUpload) {
             alert("最多上传3张");
             return false;
             }*/

            uploader.option('formData',{
                num:aa,

            })
            uploader.upload();
        });

        uploader.on('uploadProgress', function (file, percentage) {
        });

        uploader.on('uploadError', function (file, error) {
            alert('上传失败:' + error);
        });

        uploader.on('error', function (type) {
            var message = '上传失败:' + type;
            switch (type) {
                case 'Q_EXCEED_NUM_LIMIT':
                    message = '文件数量超过系统限制';
                    break;
                case 'Q_EXCEED_SIZE_LIMIT':
                    message = '文件大小超过系统限制';
                    break;
                case 'Q_TYPE_DENIED':
                    message = '系统不允许该文件类型';
                    break;
            }
            alert(message);
        });
        uploader.on('uploadComplete', function () {
            uploader.reset();
        });
        uploader.on('uploadSuccess', function (file, response) {
//            console.log(response);
//            console.log(file);
            if (response._raw) {
                console.log(response);
                uploadCount++;
                var raw = response._raw;
                var path = raw.substring(0,raw.indexOf("<"));
                if (normal_class !== '') {
                    $('[data-up=' + normal_class + ']').html(
      '<div class="upload">' +
      '<img src="__STATIC__/api/image/editImg.png" ' +
      'style=""' +
      ' class="delete-pics"/><img src="' + path + '"> ' +
      ' <input  class="you" type="hidden" value="' + path + '" name="pics[]"/> ' +
      '</div>')
                }
            } else {
                alert('上传失败,请重试!');
            }
        });

        $(document).on('click', 'img.delete-pics', function () {
            uploadCount--;
            $(this).closest('.upload').remove();
        });
    });

</script>

猜你喜欢

转载自blog.csdn.net/weixin_40534405/article/details/79900458