2

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

我们如何添加一个按钮来触发上传？

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

我已经更改了 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>
4

2 回答 2

15

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

$(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();
           });
        }
    });
});
于 2012-11-02T18:30:52.527 回答
-1

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

<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>
于 2013-04-11T19:34:24.657 回答