1

私は Grails で写真のアップロードに取り組んでいます。g:form を使用すると、すべて正常に動作し、ファイルが解析され、変換され、コントローラーのセッションに配置され、応答として、写真といくつかの非表示の入力を含むテンプレートがレンダリングされます。次のステップは、画像を切り取り、新しい座標を送り返すことです..

これは「uploadForm」コードです:

<g:form name="uploadForm" onSuccess="sucess()" enctype="multipart/form-data" url="[controller:ProfileEditor, action:"preview${type.capitalize()}", params:[profilId:profilId]]" >
<input type="file" name="${type}" />
<input type="submit" value="<g:message code="button.${type}.upload" />">
</g:form>
<div id="uploadPreview"></div>
<script type="text/javascript">
    function success() {
        $('#uploadPreview').html(data);
    alert("upload complete");   
}
</script>

レスポンスを挿入したい

('#uploadPreview')

送信ボタンをクリックする代わりに、ブラウザは画像付きのテンプレートを含む url-attr で指定された URL に移動します。

問題は、enctype="multipart/form-data" が完全に無視されるのと同じように、g:formRemote を使用するとデータが投稿されないことです。Ajax 経由でファイルをアップロードするのは少しトリッキーです。jquery で既に解決していますform.js とその ajaxForm は、formRemote を必要とせず、同じページに写真をアップロードすることを可能にしましたが、Chrome で重大なセッションの問題とスクリプト エラーがランダムに発生し、もはや使用できません。 /ium とオペラなので、別の方法を見つけなければなりません

これは、上記のコードで sucessFunction がある単純な form.js の方法です。

-       var options =  {
-           beforeSubmit : function() {
-               uploadPreview.empty();
                },  
-           complete : function(xhr) {
-               percent.empty();
-               uploadPreview.html(xhr.responseText);
-           }
-       };
-       $('#uploadForm').ajaxForm(options);

そして、formRemoteを使用してファイルをformDataとして投稿し、divを更新する簡単な解決策があるのではないかと思います。ラッピングフォーム内でトリミングするajax-fotoアップロードは一般的なことですか？

前もって感謝します

4

0 に答える 0