使用AJAX删除图像，无需重新加载页面

我想通过AJAX从服务器上删除上传的图像，并且不使用页面reaload。使用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); 

      } 


     }); 

    });

可有人建议更换我还是帮我这个功能呢？非常感谢！

来源

2017-03-16 J. Donsn

我试过了，但是没有帮助：/ –

你确定'/ en/ajax/user/img_upload_delete'能正确处理删除吗？它是否会创建相同的路径，因为您只传递base_name？你有没有试过在它自己的'var_dump'上运行这个删除页面的参数？您可以在控制台的网络响应选项卡中看到它。你能看到你想删除的文件吗？你的网络服务器用户（Apache等）是否有权删除该文件夹中的文件？你能发布你的删除页面的一些片段吗？ –

试试这个

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。

来源

2017-03-16 13:10:57

我的代码是功能，它从服务器中删除图像，但不点击删除按钮后不隐藏框。我需要刷新页面manualy。不明白为什么......：/ –

原因可能是您的div id中使用的特殊字符。删除所有特殊字符，例如.jpg等'id =“{{$ img_basename}}”' –

使用AJAX删除图像，无需重新加载页面

回答

相关问题