0
私は広告サイトを持っています。あなたのアカウントでは、複数の画像をブラウザでプレビューしてからサーバーに送信することができます。保存ボタンをクリックすると、すべてのデータがサーバーに送信されます。次に、新しい画像を削除したり追加したりするには、サイクルごとに（HTMLページを読み込んでいる間はPHPで）ロードし、次に配列に配置して（JavaScript）、画像との関連で変更があったかどうかを確認します - サーバーに送信するか、サーバー上のすべてを削除します。ブラウザでプレビューしてサーバーに画像を読み込んで削除する
問題は、イメージがHTMLページに表示される順序で配列に配置されないことです。正確なコードは、ブートごとに異なる方法で動作します。時にはイメージの順序と同じであることもあります。各イメージの読み込み速度の違いの場合がありますが、ページが完全に読み込まれた後に、イメージを読み込みます。
以下はコードです。
ロード画像：
<?php
$imgOut = '';
$i = 0;
while(($fileName = $fileNamesArr->fetch_object()) !== null){ //Image names from the database
$imgOut .= '<div id="img-'.$i.'" class="image" style="background: url(images/'.$fileName->Filename.'); background-size: cover;">';
$imgOut .= '<a href="#" id="drop-'.$i.'" class="drop-button">Удалить изображение</a>';
$imgOut .= '</div>';
$i++;
}
echo '<div id="upload-button"><span>Кол-во файлов: <b>'.$i.'</b></span></div>'.$imgOut;
?>
次に配列にそれをプッシュする：
<script type="text/javascript"><!--
$(window).load(function() {
var dataArray = [];
var data_Array_old = [];
var divImg = $('.image');
var re = /^url\("(.+)"\)$/;
$.each(divImg, function(index){
var str = $(this).css('background-image');
//alert(str);
var newstr = str.replace(re, "$1");
(function(index){
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/jpeg");
dataArray.push({name : newstr.replace(/(.+)\/(\w+)\.(jpg|jpeg)$/,"$2"), value : dataURL});
//alert(dataArray[index].name);
if((index + 1) == divImg.length) {
Array.prototype.push.apply(data_Array_old, dataArray)
}
};
img.src = newstr;
})(index);
});
});
--></script>
私たちは警告のコメントを解除した場合、我々はそのようないくつか得ることができます：ALERT1 - IMG1、IMG2、IMG3をalert2 - error（未定義の 'name'プロパティを読み取れません）、img2、img3。したがって、dataArrayには2つのイメージimg1はプッシュされませんが、次の起動時には正常にプッシュできます。
を使用する必要がある文字列をエスケープするために、
とそしてJSでそれを使用することができますが、私は正確にあなたの質問が何であるかを理解していなかった解決策かどうかPHPまたはjavascriptで行う必要があります。 –
PHP **では、新しくアップロードされたイメージの配列と既存のイメージの配列（最初にアップロードされたもの）を得ることができれば、 'array_intersect'と' array_diff'を使って新しいものを見つけることができます。 –
PHPがキャンバスも作成している可能性があるので、等号のコードアライメントはひどく見え、あなたの例は私に納得させません。既にキャンバス要素が作成されているので、既にキャンバス要素が作成されている（またはキャンバス要素が削除されて再作成される）ため、このキャンバス要素が作成されるため、このような操作によるアプローチの結果でもよいでしょう。そのコードはどこですか？ – entwicklerseite