2017-03-16 12 views
0

アップロードした画像をAJAXを使用してサーバーから削除し、ページの再ロードをしないで削除したいと考えています。ページをリロードしないでAJAXで画像を削除する

私はいくつかのコードを書こうとしましたが、結果はありませんでした。ここで

は私のHTMLコードです:ここで

   <div class="row"> 
       @if(!empty($service_data) && !empty($service_data->sd_folder)) 
       @foreach(File::files(Helper::getUserUploadFolder($service_data->sd_uid).'services/'.$service_data->sd_folder) as $others_img) 
        {{--*/ $img_filename = pathinfo($others_img)['filename']; 
          $img_basename = pathinfo($others_img)['basename']; 
         if($img_filename == 'main') continue; /*--}}       

       <div class="col-sm-4" id="{{$img_basename}}"> 
       <div class="example"> 
        <div class="thumbnail"> 
        <img class="cover-image overlay-figure overlay-scale" src="{{asset($others_img)}}"> 
        <div class="caption"> 
         <p><a class="btn btn-primary margin-right-5 img_delete" data-filename="{{$img_basename}}" role="button">DELETE</a></p> 
        </div> 
        </div> 
       </div> 
       </div> 

       @endforeach 
       @endif 
      </div> 

は私のJSコード:

 var service_folder = $('#service_folder').val(); 


    $('body').on('click', '.img_delete', function(){ 

     var filename = $(this).data('filename'); 
     var this_div = $(this); 

     if((service_folder === '') || (service_folder == 'undefined')) return false; 
     else if((filename === '') || (filename == 'undefined')) return false; 

     var img_delete_ajax = $.get("/en/ajax/user/img_upload_delete",{main_folder: 'services', imgs_folder: service_folder, filename: filename}, function(data){ 
           console.log("delete", data); 
           }); 

     img_delete_ajax.always(function(jqXHR, textStatus) { 
      if (textStatus == "success"){ 
       $('#'+filename).fadeOut(250); 

      } 


     }); 

    }); 

誰が私をお勧めしたり、この機能で私を助けることができますか? ありがとうございます!サーバーから:

+0

私は試みましたが、助けにはなりません:/ –

+1

'/ en/ajax/user/img_upload_delete'が削除を正しく処理していますか?あなたはbase_nameを渡すだけなので、同じパスを作成しますか?削除ページを自分自身で実行しようとしましたか、そこに渡されたパラメータは 'var_dump'ですか?コンソールのネットワーク応答タブで確認できます。どのファイルを削除しようとしていますか?あなたのウェブサーバーのユーザー(Apacheなど)はそのフォルダ内のファイルを削除する権限を持っていますか?削除ページのスニペットを投稿できますか? –

答えて

0

はパラメータ{真の成功を}送信成功の後、この

var service_folder = $('#service_folder').val(); 
 

 
$('.img_delete').on('click', function() { 
 

 
    var filename = $(this).data('filename'); 
 
    var this_div = $(this); 
 

 
    if ((service_folder === '') || (service_folder == 'undefined')) return false; 
 
    else if ((filename === '') || (filename == 'undefined')) return false; 
 

 
    $.get("/en/ajax/user/img_upload_delete", {main_folder: 'services', imgs_folder: service_folder,filename: filename}).done(function(data) { 
 
     if (data.success) { 
 
      $('#' + filename).fadeOut(250); 
 
     } 
 
    }); 
 
});

を試してみてください。 CONTENT_TYPEを "application/json"に設定するか、 JSON.parse(data)を使用して文字列をjsonに変換することができます。

+0

私のコードは機能ですが、サーバーから画像を削除しますが、削除ボタンをクリックした後はボックスを隠しません。私はマニュアルのページを更新する必要があります。 そして理由を理解できません:/ –

+0

あなたのdiv idで使用されている特殊文字かもしれません。 .jpgなどのすべての特殊文字を削除する 'id =" {{$ img_basename}} "' –

関連する問題