Question

我正在努力使用插件JQuery-File-upload。

我想分两步分割上传过程。

Step1 - 当在输入[type = file]中选择文件时，我会喜欢测试它的类型和大小。唯一接受的文件应该是尺寸＆lt;的图像文件4MB。
- 如果文件与这些约束不匹配，则会显示一个弹出窗口，并显示错误消息。
- 如果文件正常，我会在输入[type = text]
Step2 - 当用户点击“确定”按钮时，上传了文件启动

我有以下代码

    $('#file-img').fileupload({
        dataType: 'json',
        autoUpload: false,
        formData: {type: 'businessPicture'},
        add: function (e, data) {
            var uploadErrors = [];
            var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
            if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
                uploadErrors.push('Not an accepted file type');
            }
            if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 4000000) {
                uploadErrors.push('File size is too big');
            }
            if(uploadErrors.length > 0) {
                alert(uploadErrors.join("\n"));
            } else {
                $.each(data.files, function (index, file) {
                    $("#txt-file-img").val(file.name);
                });
                    //I COMMENT THIS LINE because if I do not, the upload start here.
                //data.submit();
            }
        },
        done: function (e, data) {
            $("#output").html('<p class="valid">SUCCESS!</p>');
            $.each(data.result.files, function (index, file) {
                $("#preview-picture").css("max-width","160px");
                $("#preview-picture").css("max-height","150px");
                $("#preview-picture").attr("src",file.url+'#'+ new Date().getTime()); 
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#upload-progress .bar').css(
                'width',
                progress + '%'
            ).text(
                progress + '%'
            );
        },
        fail: function (e, data) {
            $("#output").html('<p class="error">FAIL!</p>');
        }
    });
});

我不理解插件网站上提供的大多数示例。使用上面的代码，控件（大小和类型）都可以，但我不知道如何在单击按钮后开始上传。

根据您的说法，管理此行为的最佳方式是什么？

非常感谢

Answer 1

好的，这很容易。我只需将按钮上的click事件与动作data.submit直接绑定在实例$（'＃file-img'）。fileupload（）的事件添加下。

$('#file-img').fileupload({
    dataType: 'json',
    autoUpload: false,
    formData: {type: 'businessPicture'},
    add: function (e, data) {
        var uploadErrors = [];
        var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
        if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
            uploadErrors.push('Not an accepted file type');
        }
        if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 4000000) {
            uploadErrors.push('File size is too big');
        }
        if(uploadErrors.length > 0) {
            alert(uploadErrors.join("\n"));
        } else {
            $.each(data.files, function (index, file) {
                $("#txt-file-img").val(file.name);
            });
            $("#btn_add_valid").on('click',function () {   
                data.submit();
            });
        }
    },
    //The rest of the function....

Jquery文件上传，分两步启动上传

1 个答案: