Twitter Bootstrap FileUpload

Question

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

一旦选择了媒体资产,如何触发将图像发送到Web脚本(例如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" />