PHP jQuery Ajax は複数の画像アップロード Effects_jquery を実装します

今日私が皆さんと共有するのは、PHP jQuery Ajax を使用して、ページを更新せずに複数の画像をアップロードする効果を実現することです。ユーザーはアップロードする画像をクリックして選択するだけで、画像が自動的にサーバーにアップロードされ、ページに表示されます。

HTML

ページにフォームを配置し、post を使用してそれをバックグラウンドの php ハンドラー、upload.php に送信します。enctype 属性の設定がファイルのアップロードをサポートしている必要があることに注意してください。 #preview はアップロード後の画像を表示するために使用します。 CSSスタイルの設定については本記事では説明しておりませんので、ダウンロードパッケージのソースコードを参照してください。

コードをコピーします コードは次のとおりです:

＆lt; span＆gt; Image＆lt;/span＆gt;

フォーム>

最大 100KB、jpg、gif、png 形式をサポートします。

jQuery
この例は jQuery に基づいているため、jquery ライブラリと jquery.wallform.js をページにロードする必要があります。

コードをコピーします

コードは次のとおりです:

「画像を追加」ボタンをクリックすると、アップロードする画像を選択した後、ファイル選択ダイアログボックスが表示され、変更イベントがトリガーされます。次に、フォーム #imageform は jquery.wallform.js の ajaxForm() メソッドを呼び出し、処理のためにフォーム データをバックグラウンド PHP に送信し、返された結果に基づいてページ要素の表示を処理します。アップロードが成功すると、ページに画像が 1 つずつ表示されます。 ajaxForm() の使用方法については、このサイトの記事「Ajax フォーム送信プラグイン jqery form」を参照してください。

コードをコピーします

コードは次のとおりです: $(関数(){ $('#photoimg').die('click').live('change', function(){ var status = $("#up_s​​tatus"); var btn = $("#up_btn"); $("#imageform").ajaxForm({ ターゲット: '#preview'、

beforeSubmit:function(){

status.show(); btn.hide(); }、
success:function(){
ステータス.隠す(); btn.show(); }、
error:function(){
ステータス.隠す(); btn.show(); } }).submit(); });
});

PHP

upload.php は画像のアップロードを処理し、アップロードされた画像を Uploads/ ディレクトリに保存します。このディレクトリには書き込み権限が必要です。まず、画像が POST モードで送信されているかどうかを確認し、画像形式と画像サイズが要件を満たしているかどうかを確認してから、move_uploaded_file() を使用して画像をアップロードし、画像の名前を time().rand の形式で変更する必要があります。 (100,999)。

コードをコピーします コードは次のとおりです:

$path = "アップロード/"; $extArr = array("jpg", "png", "gif"); if(isset($_POST) および $_SERVER['REQUEST_METHOD'] == "POST"){
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
If(空($name)){
echo 'アップロードする画像を選択してください'; 終了
}
$ext = extend($name); If(!in_array($ext,$extArr)){
echo '画像の形式が間違っています! ';
終了
}
If($size>(100*1024)){
echo '画像サイズは 100KB を超えることはできません'; 終了
}
$image_name = time().rand(100,999).".".$ext; $tmp = $_FILES['photoimg']['tmp_name'];
If(move_uploaded_file($tmp, $path.$image_name)){
echo ''; }その他{
echo 'アップロードエラー! ';
}
終了
}
// ファイルタイプのサフィックスを取得
function extend($file_name){
$extend = パス情報($file_name); $extend = strto lower($extend["拡張子"]); $extend を返します
}



もちろん、実際のアプリケーションでは、データベースやユーザーセンターと組み合わせて、ユーザーがアップロードした画像をデータテーブルに保存することができます。特定のアプリケーションを自分で検討することもできます。

上記はこの記事で皆さんに共有した内容のすべてです。気に入っていただければ幸いです。