22

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

选择媒体资产后，如何触发将图像发送到 Web 脚本（例如 php）的事件？

4

3 回答 3

27

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

于 2012-09-14T09:14:11.007 回答
6

我偶然发现了类似的问题，我想在用户浏览/选择图像后立即通过 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" />
于 2012-09-18T06:58:56.983 回答
1

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

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

于 2013-03-07T22:44:51.523 回答