6

Jasny Bootstrap を使用して、選択時にファイルのプレビューを表示しています。

      <div class="fileinput fileinput-new" data-provides="fileinput">
        <div>
         <span class="btn btn-primary btn-file"><span class="fileinput-new"><span class="fa fa-camera"></span> Image 3</span>
          <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
          <input type="file" name="file" class="ephoto-upload" accept="image/jpeg"></span>
          </div>
        </div>

画像が選択され次第、ajax 経由でこの画像の送信を開始したいと思います。次のコードを使用しています。

<script>
$('.ephoto-upload').change(function(){
if($(this).val()!='') {   
var formData = new FormData();
formData.append('file', $(this)[0].files[0]);
$.ajax({
    url: '/path/to/upload',
    type: 'POST',
    data: formData,
    async: false,
    success: function (r) { 
    if(r.success) {
    //success work 
     }
    },
    cache: false,
    contentType: false,
    processData: false
});

}

}); 
</script>

アップロードは正常に機能しますが、ajax アップロードが完了すると画像のプレビューが表示されます。しかし、画像が選択されるとすぐにプレビューを表示し、選択した画像を表示した後、Ajax が実行されます。

4

1 に答える 1

2

async=false画像がアップロードされるまでナビゲーターがフリーズすることを意味するajax を設定しています。

一方、これはあなたが望んでいたものです：

<form>
    <div class="fileinput fileinput-new" data-provides="fileinput">
        <div>
         <span class="btn btn-primary btn-file"><span class="fileinput-new"><span class="fa fa-camera"></span> Image 3</span>
          <div id="preview" name="preview"  class="fileinput-preview fileinput-exists thumbnail" style="width: 200px; height: 150px; display:block;"></div>
             <img id="prevImg" name="prevImg" />   
          <input type="file" name="file" id="file" class="ephoto-upload" accept="image/jpeg"></span>
          </div>
        </div>

</form>

js:

$('.ephoto-upload').change(function(){
    previewURL(this);
    if($(this).val()!='') {   
      var formData = new FormData();
      formData.append('file', $(this)[0].files[0]);
      $.ajax({
        url: '/path/to/upload',
        type: 'POST',
        data: formData,
        success: function (r) { 
        if(r.success) {
        //success work 
      }
    },
    cache: false,
    contentType: false,
    processData: false
});

}
}); 

function previewURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                //$('#prevImg').attr('src', e.target.result);
                $('#preview').css("background", "url(" + e.target.result +")" + " right top no-repeat");  
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

async=falseデフォルトは であるため、 を削除しましたtrue。

デモはこちら

于 2014-07-23T10:50:04.520 に答える