Upload image

Interface description

Upload driver face image
(1) File path description, download all referenced files below and place them in the same folder according to the example path
├── jquery.min.js
├── WebUploaderUtil.js
├── webUploader
│ ├── Uploader.swf
│ ├── weboploader.css
│ │ener── weboploader2.js
(2) Introducing jquery.min.js and weuploader2.js and weuploader.css
(3)JavaScript code
See also: Reference JavaScript code

Reference files

Call the method

https://v7.cmsv8.com/WebuploaderApiAction_ajaxAttachUploadDriver.action?jsession=66d754dd7f41473dbd2

Operation instance

(1) Operation example
None
(2) Reference JavaScript code

html code：
    <div class="td-licenseSrc">
        <div id="uploader-demo">
                <div id="filePicker">upload pictures</div>
               <div id="fileList" class="uploader-list"></div>
            </div>
    </div>

JavaScript code：
function loadPage() {
    //Upload pictures to the server
    loadUploader();
}

function loadUploader() {
    var $ = jQuery,
        $list = $('#fileList'),
        //Optimize retina, under retina this value is 2
        ratio = window.devicePixelRatio || 1,
        allMaxSize = 10,
        //Thumbnail size
        thumbnailWidth = 80 * ratio,
        thumbnailHeight = 80 * ratio,

        //Web Uploader instance
        uploader;

    //Initialize Web Uploader
    uploader = WebUploader.create({
        //Automatically upload. 
        auto: true,
        //swf file path
        swf: 'webUploader/Uploader.swf',
        //File receiving server. 
        server: 'https://v7.cmsv8.com/WebuploaderApiAction_ajaxAttachUploadDriver.action?jsession==66d754dd7f41473dbd2',
        //[Default: 'file'] Set the name of the file upload domain. 
        fileVal: 'upload',
        //Button to select file. Optional. 
        //It is created internally according to the current operation. It may be an input element or flash.
        pick: '#filePicker',
        //Repeatable
        //duplicate:true,
        //Only allows file selection, optional. 
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        },
        fileSingleSizeLimit: allMaxSize * 1024 * 1024,//The size limit is 1M, single file, no selection will be made if it exceeds the limit
    });

    //When a file is added
    uploader.on('fileQueued', function (file) {
        var imgSize = $('#fileList img').length;
        if (imgSize > 5) {
 alert("Cannot be larger than 5 pictures");
            return;
        }
        var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail" style="float: left;margin-left: 5px;">' +
            '<img>' +
            '<div class="info">' + file.name + '</div>' +
            '</div>'
            ),
            $img = $li.find('img');

        var $btns = $('<div class="file-panel">' +
 '').appendTo($li);

        $list.append($li);

        $btns.on('click', 'span', function () {
            removeFile(file);
        });

        //Create thumbnail
        uploader.makeThumb(file, function (error, src) {
            if (error) {
 $img.replaceWith('' + "Cannot preview" + '');
                return;
            }

            $img.attr('src', src);
        }, thumbnailWidth, thumbnailHeight);
    });

    //Responsible for the destruction of view
    function removeFile(file) {
        var $li = $('#' + file.id);
        $li.off().find('.file-panel').off().end().remove();
        for (var i = 0; i < facePhotoUrl.length; i++) {
            if (facePhotoUrl[i].id == file.id) {
                delPhotoUrl.push(facePhotoUrl[i].name);
                facePhotoUrl.splice(i, 1);
            }
        }
        uploader.removeFile(file, true);
    }

    //A progress bar is created and displayed in real time during the file upload process. 
    uploader.on('uploadProgress', function (file, percentage) {
        var $li = $('#' + file.id),
            $percent = $li.find('.progress span');

        //Avoid duplicate creation
        if (!$percent.length) {
            $percent = $('<p class="progress"><span></span></p>')
                .appendTo($li)
                .find('span');
        }

        $percent.css('width', percentage * 100 + '%');
    });
    var frequently = false;
    //The file is uploaded successfully, adding a successful class to the item, and using the style to mark the upload as successful. 
    uploader.on('uploadSuccess', function (file, data) {
        if (data.result == 0) {
            if (facePhotoUrl.length < 6) {
                facePhotoUrl.push({id: file.id, name: data.name});
            }
            $('#' + file.id).addClass('upload-state-done');
        } else if (data.result == 104) {
            removeFile(file);
            if (!frequently) {
 alert("Uploading is too frequent, please continue later...");
            }
            frequently = true;
        }

    });

    //File upload failed, actual upload error. 
    uploader.on('uploadError', function (file) {
        var $li = $('#' + file.id),
            $error = $li.find('div.error');
        //Avoid duplicate creation
        if (!$error.length) {
            $error = $('<div class="error"></div>').appendTo($li);
        }

 $error.text("Upload failed");
    });

    uploader.on('error', function (type) {
        if (type == "F_DUPLICATE") {
 alert('Please do not select files repeatedly');
        } else if (type == "F_EXCEED_SIZE") {
 alert('File size cannot exceed 1M');
        }
    });

    //When the upload is complete, whether successful or failed, delete the progress bar first. 
    uploader.on('uploadComplete', function (file) {
        $('#' + file.id).find('.progress').remove();
    });

    $('.submit', '#toolbar-btn').on('click', function () {
        uploader.upload();
    });
}