파일 업로드 구성 요소 WebUploader의 기본 사용

1. Origin

회사 웹사이트 커뮤니티에는 사진 업로드 기능이 있습니다. 이미 몇 년 된 웹사이트이기 때문에 클라이언트가 플래시를 지원하는지 여부에 따라 업로드 로직이 두 가지로 나누어졌습니다. 플래시가 지원되는 경우 SWFuploader 업로드 구성 요소를 사용하여 파일을 업로드하면 더 나은 사용자 경험을 얻을 수 있습니다. 플래시가 지원되지 않는 경우 일반 입력 태그를 사용하여 업로드하세요. 이 방법은 기능이 불완전하고 경험이 좋지 않습니다. 그러나 Chrome 브라우저는 기본적으로 플래시를 지원하지 않기 때문에 사용자가 입력 태그를 사용하여 업로드하는 경우가 대부분이며, 업로드 경험도 좋지 않아 원본 업로드 구성 요소를 대체하기 위해 Baidu의 webuploader 업로드 구성 요소를 사용하기로 결정했습니다. 교체 과정에서 문제가 발견되면 주의가 필요한 부분을 기록해 두십시오.

2. WebUploader 사용 시 참고 사항

사실 타사 js 플러그인의 일반적인 사용법은 유사합니다. 기본적으로 리소스 파일을 가져오고, 구성에 따라 플러그인 개체를 초기화하고, 개체 메서드를 사용하거나 수신 대기합니다. 특정 기능을 완료하는 이벤트도 비슷합니다.

JS 리소스 파일 가져오기

<link href="../JS/webuploader/webuploader.css" rel="stylesheet" />
<script src="../JS/webuploader/jquery-1.12.4.min.js"></script>
<script src="../JS/webuploader/webuploader.js"></script>

wepuploader의 css 파일, jquery.js, webuploader.js 파일을 가져와야 합니다.

css 파일은 webuploader가 생성한 업로드 버튼의 스타일 파일입니다. 기본 스타일이 만족스럽지 않으면 먼저 요구 사항에 맞게 CSS를 직접 수정할 수 있습니다. 또 다른 방법은 CSS 파일을 직접 준비한 후 webuploader.js의 소스코드를 수정한 후 버튼의 클래스, mouseenter, mouseleave 클래스 등을 지정하는 것입니다. webuploader.js 코드 위치는 다음과 같습니다.

button.addClass('webuploader-pick');
                //button.addClass('btn');
                //button.addClass('btn-default');
    
                me.on( 'all', function( type ) {
                    var files;
    
                    switch ( type ) {
                        case 'mouseenter':
                            button.addClass('webuploader-pick-hover');
                            break;
    
                        case 'mouseleave':
                            button.removeClass('webuploader-pick-hover');
                            break;
    
                        case 'change':
                            files = me.exec('getFiles');
                            me.trigger( 'select', $.map( files, function( file ) {
                                file = new File( me.getRuid(), file );
    
                                // 记录来源。
                                file._refer = opts.container;
                                return file;
                            }), opts.container );
                            break;
                    }
                })

webuploader는 jquery 기반이므로 jquery.js를 가져와야 하며, jquery 버전은 1.10 이상이어야 합니다. 문제는 웹사이트가 오래되었기 때문에 이전에는 프로토타입.js를 사용하여 다양한 작업을 수행했다는 것입니다. $ 사용권한을 프로토타입에 넘기기 위해서는 jQuery.noContric()도 필요합니다. 물론 일반적으로 이 작업은 필요하지 않습니다.

여기서 사용하는 webuploader.js 버전은 0.1.2입니다. 이전에는 0.1.5를 사용했습니다. 그러나 0.1.5에서 플래시 업로드를 수행할 때 서버가 json 형식의 문자열을 반환하지 않으면 webuploader.js 코드가 오류를 보고하고 클라이언트는 반환 정보를 받지 못합니다. 우리 서버가 반환하는 것은 일반 문자열이므로 0.1.2를 사용하는 것 외에는 다른 방법이 없습니다.

웹업로더 객체 초기화

객체를 초기화하기 전에 업로드 버튼은 웹업로더 자체에서 생성되므로 먼저 업로드 버튼의 상위 태그를 준비합니다. , 스팬 등 내가 사용하는 것은

<span id="uploadImage"></span>

그런 다음 webuploader 개체를 초기화할 수 있습니다. js 코드는 다음과 같습니다.

    var uploader = WebUploader.create({
        //是否允许重复的图片
        duplicate: true,
        auto: false, // 选完文件后，是否自动上传
        swf: '../JS/webuploader/Uploader.swf', // swf文件路径
        server: "/upload.html", // 文件接收服务端
        pick: { id: "#uploadImage", innerHTML: "本地上传图片" }, // 选择文件的按钮。可选
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        },
        //线程数
        threads: 1,
        //单个文件大小限制
        fileSingleSizeLimit: 2000,
        //上传文件数量限制
        fileNumLimit:10,
        //上传前不压缩
        compress:false,
    });

WebUploader.create() 메서드는 webuploader 개체를 생성합니다(생성하는 다른 방법이 있는 것 같지만, 이것은 요점이 아닙니다) 구성을 전달합니다. 개체는 ok

서버 속성은 파일 업로드를 위한 서버 주소를 지정합니다.

pick 속성은 업로드 버튼을 지정하고, id는 jquery의 선택기를 통해 어떤 버튼을 지정하는지 지정합니다(#의 id 선택기일 필요는 없음).

swf 속성은 flash가 활성화될 때 swf 파일을 로드할 위치를 지정합니다(webuploader는 내부적으로 플래시, h5와 호환되므로 어떤 방식을 사용하는지 신경쓰지 않아도 됩니다)

auto 파일을 선택한 후 자동으로 업로드할지 여기서는 자동 업로드를 사용하지 않습니다. UI에서 몇 가지 작업을 수행해야 하며 그런 다음 업로드 시작을 수동으로 지정하겠습니다.

구성 시 주의해야 할 것은 위의 속성들입니다. 그 중 일부는 위 js에 설명되어 있습니다. 포함되지 않은 다른 속성은 공식 WebUploader 문서를 참조하세요.

웹업로더 이벤트 듣기

위 내용을 구성한 후 페이지에 업로드 버튼이 표시되지만 위 내용은 요점이 아닙니다. webuploader의 유연한 사용의 핵심은 이미지 업로드 과정에서 webuploader에 의해 트리거되는 일련의 이벤트를 처리하는 것입니다. 당사의 비즈니스 요구 사항에 따라 저는 주로 다음 이벤트를 모니터링했습니다.

    //当有一批文件加载进队列时触发事件
    uploader.on("filesQueued", webFilesQueued);
    //当有一批文件加载进队列时触发事件
    //uploader.on("fileQueued", webFilesQueued);
    //单个文件开始上传
    uploader.on("uploadStart", uploadStart);
    //单个文件上传成功
    uploader.on("uploadSuccess", uploadSuccess);
    //单个文件上传过程中
    uploader.on("uploadProgress", uploadProgress);
    //所有文件上传结束
    uploader.on("uploadFinished", uploadComplete);
    //图片校验不通过时
    uploader.on("error", webFileQueueError);
    //上传出错时
    uploader.on("uploadError",webUploadError);

webuploader는 귀하가 선택한 이미지를 처리합니다. 파일 대화 상자(사진 한 장일 수도 있고 여러 장일 수도 있음)가 대기열에 추가된 다음 대기열의 모든 파일이 업로드됩니다(구성한 스레드가 1보다 큰 경우 webuploader는 멀티 스레드 업로드를 지원합니다). .

filesQueued 이 이벤트는 파일 배치가 대기열에 로드될 때 트리거됩니다. 현재 파일 업로드가 시작되지 않았습니다. 예를 들어, 이번에 업로드된 사진 수를 확인한 다음 페이지에 너무 많은 사진 상자를 동적으로 생성해야 하는 몇 가지 비즈니스 로직을 수행할 수 있습니다. 비즈니스 로직을 실행한 후 업로드 시작을 수동으로 지정하고(auto: false를 구성했기 때문에) loader.startUpload()를 실행해야 합니다(업로드가 자동인 경우 이 메서드를 수동으로 실행할 필요가 없습니다). 현재 대기열에 있는 사진은 업로드가 시작되었습니다.

fileQueued는 filesQueued와 유사하지만 단일 파일이 대기열에 있을 때 트리거되는 이벤트입니다. 이 이벤트는 한 번에 여러 이미지를 선택할 때 여러 번 트리거됩니다.

uploadStart 이벤트는 단일 파일 업로드가 시작될 때 트리거됩니다.

uploadProgress는 단일 파일 업로드 중에 트리거되는 이벤트입니다. 콜백 메소드에서 업로드 비율을 수신하여 업로드 진행률 표시줄을 동적으로 표시할 수 있습니다.

uploadSuccess 单个文件上传成功触发的事件，在回调方法内你可以接收到服务器端返回的数据以及当前是哪个file对象上传成功，目测通过file对象可以获取到图片的缩略图对象（webuploader前端帮我们生成的），可以在UI上显示缩略图等等逻辑（根据自己的业务要求决定。。。。）。

function uploadSuccess(file, serverData) {
    doSomeThing();
}

uploadFinished 队列中所有文件上传成功时触发的事件，具体回调方法视业务逻辑决定。

error 图片在加入队列之前会进行校验，看大小、格式等等是否满足配置要求，校验不通过触发的事件，你可以在UI上弹窗提示用户

uploadError 这里图片校验通过，加入了队列，并且开始上传到服务器，如果服务器或者网络有问题导致出错触发的事件，可以提示用户上传不成功。

三、一些杂项

按照以上方法应该一般的上传问题都可以解决，不过这次替换过程中还遇到一些问题，记录如下：

上传总数量限制

在前端我们有总数量的限制，但是配置时fileNumLimit：10属性指的并不是总数量10张，而是该次对话框你选择的文件数量，如果文件对话框内你选了12张，那么webuploader也会上传10张，但是后面的两张会丢弃掉。如果想对总数量限制一种方法是修改webuploader.js的源码：

 uploader.on( 'beforeFileQueued', function( file ) {
                //实时获得上传限制的文件总数
                max = this.options.fileNumLimit;
                if ( count >= max && flag ) {
                    flag = false;
                    this.trigger( 'error', 'Q_EXCEED_NUM_LIMIT', max, file );
                    setTimeout(function() {
                        flag = true;
                    }, 1 );
                }
                return count >= max ? false : true;
            });
    
            uploader.on( 'fileQueued', function() {
                count++;
            });
    
            uploader.on( 'fileDequeued', function() {
                count--;
            });
    
            uploader.on( 'uploadFinished', function() {
                //count = 0; 限制总数量，而不是限制一次的文件数量
            });

数量校验结束后count会清0，把这个注释掉（上面js倒数第二行被注释的代码）那么fileNumLimit就是总数量了。

还有一种方法是webuploader会记录上传成功的文件数，自己拿到这个数来进行判断就行了。

chrome浏览器不能连续选择相同图片

连续上传同一图片时在chrome浏览器上总是不触发入队的事件，刚开始以为是配置的duplicate属性是false，后来发现duplicate属性是正确的true。这是chrome的特性，选择文件对话框关闭的时候会将input标签的value属性设置为这张图片的hash值？，如果input已经有了value属性（上一张图片的），并且和这一张的相同，那么将不触发change事件，也就是不上传了。解决方法：

function uploadComplete(file) {
        //解决chrome浏览器不能连续两次上传相同图片的bug k----------
        if ($("uploadImageDiv").select("input").length > 0) {
            $("uploadImageDiv").select("input")[0].value = "";
        }
        //解决chrome浏览器不能连续两次上传相同图片的bug k----------
}

监听上传完成事件，把input标签的value设为空就行了。

推荐教程：《JS教程》

위 내용은 파일 업로드 구성 요소 WebUploader의 기본 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!