Question

我想使用bootstrap-fileupload.js（http://jasny.github.com/bootstrap/javascript.html#fileupload），但我对事件触发器感到困惑。

如果选择媒体资源，如何触发将图像发送到网络脚本（例如php）的事件？

Answer 1

我建议您使用https://github.com/blueimp/jQuery-File-Upload进行文件上传。

Answer 2

我偶然发现类似问题，我想在用户浏览/选择图像后立即通过AJAX请求上传图像，并使用保存的图像ID更新隐藏字段。我找不到bootstrap-fileupload.js的解决方案。所以下面的方法对我有用。

<script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript"> 
var options = { 
        success:       showResponse  // post-submit callback 
    }; 
    $(document).ready(function()
    {
        $('#photoimg').live('change', function()
        {
            $("#imageform").ajaxForm(options).submit();         
        });
    });

    function showResponse(responseText, statusText, xhr, $form)  { 
        $('#photoUrl').val(responseText);
    }
</script>

图像表格:(不得为嵌套表格！）

<form id="imageform" action="${pageContext.request.contextPath}/app/upload/saveimage" method="post" enctype="multipart/form-data">
                <div style="top: 25px">
                <div class="span6" style="margin-top: -545px; margin-left:680px">
                <div class="control-group">
                <label class="control-label " style="text-align: left">Photo: </label>
                <div data-fileupload="image" class="fileupload fileupload-new">
                    <div style="margin-left:-235px ;width: 150px; height: 150px; line-height: 150px;" class="fileupload-preview thumbnail" ></div>
                    <div>
                        <span class="btn btn-file" style="margin-right: 135px"><span class="fileupload-new" >Select image</span><span class="fileupload-exists">Change</span><input type="file" name="fileData" id="photoimg"/></span> <a data-dismiss="fileupload" class="btn fileupload-exists" href="#" style="margin-left: -75px">Remove</a>
                    </div>
                </div>
                </div>

                </div>
                </div>
            </form>

<input type="hidden" name="individualCustomer.personInfo.photoUrl" id="photoUrl" />

Answer 3

您可以通过删除bootstrap.fileupload.js文件将其与jQuery文件上载（https://github.com/blueimp/jQuery-File-Upload）集成，因为它与jQuery File Uploader存在命名冲突，并且无法正常使用它。这意味着您将无法使用Jasny组件的更高级功能。但我建议你阅读代码并实现自己的解决方案（这并不难：））。

您可以做的另一件事是使用不同的组件进行引导。该组件开箱即用，无需修改标记：http://gregpike.net/demos/bootstrap-file-input/demo.html。它比jasny组件更简单，因此在某些情况下可能更合适。

Twitter Bootstrap FileUpload

3 个答案: