blueimp-jquery fileupload onClick事件_Jquery_File Upload_Blueimp

blueimp-jquery fileupload onClick事件

jquery file-upload

blueimp-jquery fileupload onClick事件,jquery,file-upload,blueimp,Jquery,File Upload,Blueimp,我们正在使用Blueimp Jquery文件上传我们如何添加一个按钮来启动上传现在，只要用户选择一个文件，上传就会发生。我们希望用户选择文件，然后单击“立即上载”按钮我已经更改了JS文件，将autoUplaod设置为false，但是我可以找到如何让OnClick工作的方法 <script> $(function () { $('#fileupload').fileupload({ dataType: 'json', done: func

我们正在使用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>


$（函数（）{
$（'#fileupload'）。fileupload({
数据类型：“json”，
完成：功能（e，数据）{
$.each（data.result、函数（索引、文件）{
$（''）.text（file.name）.appendTo（document.body）；
});
}
});
});

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

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

$（函数（）{
$（'#fileupload'）。fileupload({
数据类型：“json”，
完成：功能（e，数据）{
$.each（data.result、函数（索引、文件）{
$（''）.text（file.name）.appendTo（document.body）；
});
},
添加：功能（e、数据）{
$（“#uploadBtn”）.off（'click'）.on（'click'，函数（）{
data.submit（）；
});
}
});
});

我尝试过修改“添加”功能，但除了在所有internet explorer浏览器中，输入框中没有显示选定的文件外，该功能还可以正常工作。另外，根据我的经验，如果在单击按钮之前多次更改，所有文件都会上载。这对我很有用： 1.不要立即实例化blueimp fileupload对象 2.创建一个基本上实例化fileupload对象的函数 3.将上面#2中的功能附加到按钮单击我意识到我下面的代码中有一些冗余。另外，我强制使用IframeTransport，您可能可以对它进行浏览器检查。您还可以对添加功能进行浏览器检查，例如，您可以使用“文件输入”，其他人可以使用“文件”。这对我来说在所有浏览器中都很好，除了进度条，我需要在“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>


$（函数（）{
/*在这里执行jquery操作，但不要调用fileupload*/
$（“btnUpload”）。单击（函数（）{
/*我可以添加额外的post参数*/
/*有些是多余的*/
var post=Array（{name:“hello”，value:“there”}）；
uploadFileOnClick（“fileupload”，“$”（“#fileupload”），post，true）；
});
});
函数uploadFileOnClick（id、文件、post、\u自动上载）{
$（'#'+id）.fileupload({
数据类型：“json”，
多部分：正确，
自动上传：对，
formData:post，
forceIframeTransport：对，
进度：功能（e、数据）{
/*在此处插入进度代码*/
},
完成：功能（e，数据）{
/*在这里插入您的代码*/
}
});
如果（_自动上载）{
$（'#'+id）.fileupload（'add'，{files:file}）；
}
}

@烤熟了。off（'click'）。on（'click'，function（）{…技巧真是太棒了。非常感谢！如果可以的话，我会诚实地吻你。你如何从插件代码外部调用data.send（）？如果我想从另一个ajax请求开始上传，那是不相关的？

$（'#一些不相关的表单'）。on（'ajax:complete'，function（）{//start upload here}）；

@Mohammad您可能有兴趣阅读以下页面