1

I have a html structure like below, it is random div tag and img tag, and these also store in database too.
Now I have to filter the img src in below string, to remove files not in this structure but store in directory,
whats the best way to get the src in this structure in frontend use jquery or server side use php.
Any suggestion how to do this? Thanks so much!!

in frontend

<div class="h1">content<div>
<div class="h1" style="">content</div>
<div class="h1" style="">...</div>
<div class="h2">...</div>
<div class="h1" style="">content</div>
<img src="u_img/5/1.png" style="" class="">
<div class="link" style="">link: http://...</div>
<img src="u_img/5/14.jpeg" style="" class="">
<div class="h1" style=""..</div>
<img src="u_img/5/3.png" style="" class="">

in database

<div class="h1">content<div><div class="h1" style="">content</div><div class="h1" style="">...</div><div class="h2">...</div><div class="h1" style="">content</div><img src="u_img/5/1.png" style="" class=""><div class="link" style="">link: http://...</div><img src="u_img/5/14.jpeg" style="" class=""><div class="h1" style=""..</div><img src="u_img/5/3.png" style="" class="">

UPDATE
if I get those img src in frontend store in array post via jquery to php file like below, then how to delete those file not in this array

var srcArray=$('img').map(function(){
    return $(this).attr('src');
});
var fd = new FormData(uf[0]);
fd.append('srcArray',srcArray);
$.ajax({
    type: "POST", url: "img_clean.php",
    data: fd,
    processData: false, contentType: false,
})

php

$srcArray = $_POST['srcArray']; 

//How to delete file not in the array?

foreach($srcArray as $row){
    $dir = "u_img_p/".$id;  
        //unlink($dir.'/'.$row);
    } 
}
  • the img src means the files in directory. example: u_img/5/1.png , u_img/5/3.png , but there others store in the directory but not been show in front end, and those files doesn't need to exist, I try to clean up those files –  Jul 25 '13 at 11:06

3 Answers3

1

use attr() to get the src

 $('img').each(function(){
    var $src=$(this).attr('src'); //prop() for latest versio of jquery.
    //do you stuff ..$src is the source 
 });

or you can use map() to store all the source in an array

var srcArray=$('img').map(function(){
    return $(this).attr('src'); //prop() for latest versio of jquery.

 });

srcArray will have all the image sources.

NOTE:$('img') selects all the image tag present in the document .. be careful

updated after edit.

$.ajax({
 type: "POST", 
 url: "img_clean.php",
 data: {'postedValue':srcArray},
 processData: false, contentType: false,
})

PHP

$srcArray = $_POST['postedValue']; 

foreach($srcArray as $row){
  $dir = "u_img_p/".$id;  
   unlink($dir.'/'.$row); //delete it
  } 
}
bipen
  • 36,319
  • 9
  • 49
  • 62
  • Thanks for reply! if I use map get array and post via ajax to server php file, then how to delete those files in php, would you show me some code for example –  Jul 25 '13 at 11:11
  • you can post the array and get the posted values using `$_POST['postedValue']` postedValue is the array name that you send as data in ajax...in serverside .. use `foreach($_POST['postedValue'])` and get each src.. and delete it (`@unlink`) – bipen Jul 25 '13 at 11:27
  • Thanks for reply and show the example. but I expecting result is keep those file in array delete others not in this array in same folder, do you know how to fix it ? Thanks. –  Jul 26 '13 at 03:22
  • 1
    hmmm.. then use the while loop as you have done previously... inside the foreach loop of php and add the filename as `$row` – bipen Jul 26 '13 at 05:51
  • yep I forgot... sorry!! and Thanks for the help!! it works now!! –  Jul 26 '13 at 09:18
1

Using a regular expression should do the trick for you

preg_replace("/<img[^>]+\>/i", "empty", $mydatabasecontent)
  • 1
    also found this thread that explain how to solve this issue in php http://stackoverflow.com/questions/1107194/php-remove-img-tag-from-string – binarysoldier Jul 25 '13 at 11:21
0
var sources = [];

$("img").each(function(){
   sources.push($(this).prop("src")); // for older jQuery versions use attr("src");
});

This will ad all of the image sources to one array.

Pankucins
  • 1,690
  • 1
  • 16
  • 25
  • you should use `attr()` instead of `prop()`. The difference is that one will return `u_img/5/1.png` and the other one the full url path `http://yoursite.url/u_img/5/1.png` – Spokey Jul 25 '13 at 11:11