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リクエストを介して画像をアップロードし、保存された Image 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

jQuery File Uploader と名前が競合し、正しく動作しないため、bootstrap.fileupload.js ファイルを削除することで、jQuery File Upload ( https://github.com/blueimp/jQuery-File-Upload )と統合できます。それ。これは、Jasny コンポーネントのより高度な機能を使用できないことを意味します。ただし、コードを読んで独自のソリューションを実装することをお勧めします (それほど難しくありません:))。

他にできることは、ブートストラップに別のコンポーネントを使用することです。このコンポーネントはすぐに使用でき、マークアップを変更する必要はありません: http://gregpike.net/demos/bootstrap-file-input/demo.html。これは jasny コンポーネントより単純であるため、場合によってはより適している可能性があります。

于 2013-03-07T22:44:51.523 に答える