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

时间:2014-11-05 10:11:22

标签: javascript file-upload jquery-file-upload blueimp

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

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

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

        $('#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>');
            }
        });
    });
    

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

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

    非常感谢

1 个答案:

答案 0 :(得分:0)

好的,这很容易。我只需将按钮上的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....