chat-server/qq-imsvr/view/broadcast/shotsLayer/addPhoto.html

<style>
    .plusForm div.btn {padding: 0px; }
    .plusForm .content div{margin-bottom: 0px;}
    #filePicker>.webuploader-pick{background: none; color: #000000; padding: 0px; height: 29px; line-height: 29px; width: 98px; border: none;}
</style>
<div class="plusForm photo">
    <div>
        <div class="title">Add Photo Shot</div>
        <div class="close"><a href="javascript:;"><img src="<%=public_path%>/img/close-btn.png" alt=""/></a></div>
    </div>
    <div class="content">
        <div>Photo <label>(PNG, JPEG and JPG format only, less than 6MB. Image size must be between 640 * 640 pixel and 6000 * 6000 pixel.)</label></div>
        <input class="uploadFile" id="uploadFile" disabled="disabled" style="background: none;" placeholder=""/>
        <div class="fileUpload btn btn-primary" style="margin-bottom: 2px;">
            <div id="filePicker">Browse photo</div>
            <input type="hidden" name="img" value="">
        </div>

        <div>
            <div>Description <label>(48 - 140 characters.)</label></div>
            <textarea name="paragraph" maxlength="140" placeholder="" style="width: 488px; height:100px; resize: none;"></textarea>
            <div class="tips" style="float: right;"><label id="descriptionNumber" style="color: red;">0</label> / 140</div>
            <div class="clear"></div>
        </div>

        <div style="margin-bottom: 15px;">
            <div>Appear to profile page:</div>
            <select name="is_show_profile" style="width: 209px;">
                <option value="1">Yes</option>
                <option value="0">No</option>
            </select>
        </div>

        <button class="Submit cursor">Submit</button>
        <img id="text" src="">
    </div>
</div>
<script>
    $(function(){
        $('textarea[name="paragraph"]').on('input', function(){
            let description = $(this).val();
            $('#descriptionNumber').text(description.length);
        })

        //创建文件上传
        var uploader = WebUploader.create({
            auto: true,
            fileSingleSizeLimit: 1024*1024*6,
            swf: '<%=public_path%>' + '/js/webuploader/Uploader.swf',
            server: '<%=server_host%>/api/?act=uploadDynamicImg',
            pick: '#filePicker',
            accept: {
                title: 'Images',
                extensions: 'jpg,jpeg,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            },
            compress: null
        });

        // 图片上传中
        var uploadProgress = 0;//防止重复提示
        var load = '';
        uploader.on( 'uploadProgress', function( file, percentage ) {
            if (!uploadProgress) {
                load = layer.load(2);
            }
            uploadProgress = 1//等于1表示不上传动作已经开启
        });

        //文件上传成功
        uploader.on( 'uploadSuccess', function( file, response) {
            if(response.errno == 13){
                myParentAlert("The image size must be larger than 640px(width) * 640px(height).");
            }
            if(response.errno == 14){
                myParentAlert("The photo resolution can not be larger than 6000 * 6000.");
            }
            uploader.removeFile(file);//从队列中移除上传的文件，以便可以重复上传
            if(response.errno == 0){
                $('#uploadFile').val(file.name);
                $('input[name="img"]').val(response.data.url);
            }
            uploadProgress =0;//重置开关
            layer.close(load);
        });

        //文件上传失败
        uploader.on( 'uploadError', function( file ) {
            myParentAlert("Failed to upload. Please try again.");
            uploadProgress = 0;//重置开关
            layer.close(load);
        });

        //错误提示
        uploader.on("error", function (type) {
            if(type == "Q_TYPE_DENIED"){
                myParentAlert("Incorrect format. Only JPG, JPEG and PNG format allowed. File size must be 6M or less.");
            }
            if(type == "F_EXCEED_SIZE"){
                myParentAlert("Incorrect format. Only JPG, JPEG and PNG format allowed. File size must be 6M or less.");
            }
        });

        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.iframeAuto(index);
        $('.close').click(function(){
            parent.layer.close(index);
        })
        var change_status = 0;//防止多次点击
        $('.Submit').click(function(){
            if(change_status){
                return false;
            }
            change_status = 1;
            var img = $('input[name="img"]').val();
            if(!img){
                myParentAlert('Please select an valid photo.');
                change_status = 0;
                return false;
            }
            var paragraph = $('textarea[name="paragraph"]').val();
            paragraph = paragraph.trim();
            if(paragraph.length<48){
                myParentAlert('Please enter at least 48 characters of description.');
                change_status = 0;
                return false;
            }
            var is_show_profile = $('select[name="is_show_profile"]').val();
            $.post('/broadcast/shotsLayer/addPhoto', {img:img,paragraph:paragraph,is_show_profile:is_show_profile}, function(data){
                if(data.errno == 0) {
                    Cookies.set('add_success_photo', {status:1});
                    parent.layer.close(index);
                    parent.layer.msg('Submit successfully. Auditing soon.');
                }else{
                    myParentAlert('Failed to submit. Please try again.');
                    change_status = 0;
                }
            })
        })
    })
</script>