Twitter Bootstrap FileUpload

Я хотел бы использовать bootstrap-fileupload.js(http://jasny.github.com/bootstrap/javascript.html#fileupload), но меня путают с триггером события.

Как я могу инициировать событие, отправляющее изображение в веб-сайт script (например, php) после выбора медиа-ресурса?

Ответы

Ответ 2

Я наткнулся на аналогичную проблему, когда захотел загрузить изображение через запрос AJAX, как только изображение просматривается/выбирается пользователем и обновляется скрытое поле с сохраненным идентификатором изображения. Я не смог найти решение с помощью 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" />

Ответ 3

Вы можете интегрировать его с загрузкой файла jQuery (https://github.com/blueimp/jQuery-File-Upload), удалив файл bootstrap.fileupload.js, так как он имеет конфликт имен с jQuery File Uploader и не будет работать с ним. Это означает, что вы не сможете использовать более продвинутые функции компонента Jasny. Но я предлагаю вам прочитать код и реализовать свое собственное решение (это не так сложно:)).

Другое, что вы можете сделать, это использовать другой компонент для загрузки. Этот компонент отлично работает, не нужно изменять свою разметку: http://gregpike.net/demos/bootstrap-file-input/demo.html. Это проще, чем компонент jasny, и поэтому может быть более удобным в некоторых случаях.