Question

我们正在使用Blueimp Jquery文件上传。

我们如何添加按钮来启动上传？

现在，只要用户选择文件，就会立即上传。我们希望让用户选择文件，然后单击UPLOAD NOW按钮。

我已经更改了JS文件，将autoUplaod打开为false，但可以弄清楚如何使OnClick正常工作。

<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>

Answer 1

也许您正在寻找添加函数回调：

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        },
        add:function (e, data) {
           $("#uploadBtn").off('click').on('click',function () {           
             data.submit();
           });
        }
    });
});

Answer 2

我尝试修改“添加”功能，除了在所有Internet Explorer浏览器中所选文件没有出现在输入框中之外，它还有效。另外，根据我的经验，如果在点击按钮之前多次更改它，则会上传所有文件。这对我有用： 1.不要立即实例化blueimp fileupload对象 2.创建一个基本上实例化fileupload对象的函数 3.将上面＃2中的功能附加到按钮单击我发现下面的代码中有一些冗余。我也强迫IframeTransport，你可以做一个浏览器检查。你也可以做浏览器检查添加功能，因为你可以使用“fileInput”，对于其他人你可以使用“文件”。这在我的所有浏览器中都适用，除了进度条，我需要补间“forceIframeTransport”来检查浏览器

<script>
    $(function () {
        /*do your jquery stuff here, but do not call fileupload*/
        $("btnUpload").click(function(){
            /*i can add additional post params*/
            /*some of this is redundant*/
            var post = Array({name:"hello", value:"there"});
            uploadFileOnClick("fileupload", $("#fileupload") ,post, true);
        });
    });
    function uploadFileOnClick(id, file, post, _autoUpload) {
        $('#'+id).fileupload({
            dataType: 'json',
            multipart: true,
            autoUpload: true,
            formData: post,
            forceIframeTransport: true,
            progress: function (e, data) {
                /*insert progress code here*/
            },
            done: function (e, data) {
                /*insert your code here*/
            }
        });
        if (_autoUpload) {
            $('#'+id).fileupload('add', {files: file});
        }
    }
</script>
<body>
    <form method="post" enctype="multipart/form-data">
        <input type="file" id="fileupload" name="somename" data-url="yourserver.php?goeshere=true"/>
    </form>
    <!-- i use a link in my case, it will work if you use a button in the form as well-->
    <a href="javascript:void(0);" id="btnUpload">Upload</a>
</body>

blueimp - jquery fileupload onClick事件

2 个答案: