2

BlueimpJqueryファイルのアップロードを使用しています。

アップロードを起動するボタンを追加するにはどうすればよいですか？

現在、ユーザーがファイルを選択するとすぐにアップロードが行われます。ユーザーにファイルを選択してもらい、[今すぐアップロード]ボタンをクリックしてもらいます。

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 に答える