ajaxファイルのインスタントアップロードを実現するjQuery+phpの詳細解説_PHPチュートリアル

たとえば、ローカル画像を選択すると、その画像がすぐにアップロードされて表示されるなど、多くのプロジェクトで必要となります。この記事では、jQuery と PHP を使用してファイルの Ajax インスタント アップロード機能を実装する方法を説明する例を示します。ユーザーはローカル画像を選択してアップロードするだけで、アップロード後にアップロードの進行状況バーが表示されます。完了すると画像情報が表示されます。

HTML この例は、jQuery と優れた jquery.form プラグインに基づいているため、最初に jquery ライブラリとフォーム プラグインをロードする必要があります。 ;/script> 次に、次のコードをページに追加します:

コードをコピーします。 コードは次のとおりです: 添付ファイルを追加 > div id=" showimg">

HTML に添付ファイルを追加するためのボタン要素 .btn、ファイル情報を表示するためのプログレスバー .progress、.files、および表示用の #showimg を配置します。画像を見ると、ファイルのアップロードに使用する HTML にはフォーム form が表示されず、通常のアップロード機能はフォーム form に依存していることがわかります。フォームは動的に挿入されるため、大きなフォームに複数のフォームが表示されることを回避できます。

CSS

ファイルをボタンにブラウズするための従来のフォーム コントロールを美化するために CSS を使用しています。クールに見えませんか? コードをコピーします

コードは次のとおりです: .btn{position:relative;overflow:hidden;margin-right:4px;display:inline-block;

*display:inline;padding: 4px 10px 4px;font-size:14px;line-height:18px; *line-height:20px;color:#fff; text-align:center;vertical-align:middle;cursor:pointer;background:#5bb75b ; ボーダー:1px ソリッド #cccccc;ボーダーカラー:#e6e6e6 #e6e6e6 #bfbfbf; ボーダーボトムカラー:#b3b3b3;-webkit-border-radius:4px; -半径: 4px;} .btn input{位置: 絶対;上: 0; 右: 0;マージン: 0;ボーダー: 透明; フィルター: アルファ(不透明度 = 0); . 位置: 相対; マージン-左:-24 ピクセル; パディング: 1 ピクセル; .bar {背景色: 緑; 表示: ブロック; 高さ: 20 ピクセル; 位置: 絶対高さ: 20 ピクセル; color:# fff } .files{height:22px; line-height:22px; margin:10px 0}

jQuery 最初に定義しますさまざまな変数を使用する場合、フォーム要素 form はアップロード ボタンに動的に挿入され、フォーム属性 enctype は multipart/form-data に設定する必要があることに注意してください。次に、「添付ファイルのアップロード」ボタンをクリックしてアップロードするファイルを選択すると、次のコードで説明するように、jquery.form プラグインの ajaxSubmit メソッドを呼び出します。

コードをコピーします

コードは次のとおりです: $(function () { var bar = $('.bar'); var パーセント = $('.percent'); var showimg = $('#showimg'); var progress = $( ".progress"); var files = $(".files"); var btn = $(".btn span"); $("#fileupload").wrap(" Method='post' enctype='multipart/form-data'> "); $("#fileupload").change(function(){ //ファイルを選択 $ $ ("#Myupload"). AjaxSubmit ({ dattype: 'json', // データ形式は json です beforesend: function () {// アップロード開始 showimg.empty (); // 画像 progress.show(); // 進行状況バーを表示します varpercentVal = '0%' bar.width(percentVal); html(percentVal) ; // 表示の進行状況は0％btn.html（ "アップロード..."）; width(percentVal); {// 成功获 // バックグラウンドで返された JSON データを取得し、ファイル名、サイズ、削除ボタンを表示 Files.html ("& lt; b & gt;"+data.name+"( "+data.size+"k) & lt; /b>demo.helloweba.com/upload/files/"+data.pic; showimg.html ("& lt; img src = '"+img+"' & gt ;"); btn.html ("添付ファイルの追加");/ /アップロードボタン復元 }, error:function(xhr){ //アップロードに失敗しました btn.html("アップロード失敗"); 使用する 使用する‐ ‐ through using ‐ ‐ ‐ files.html(xhr.responseText); // 失敗情報を返します .フォームプラグインの各種オプション設定とサンプル。 次に、ファイルのアップロードが完了します。ユーザーがアップロードしたファイルを削除したい場合は、ajax post リクエストを作成して削除操作を完了します。

コードをコピーします

コードは次のとおりです: $(function () { ; P $ .post ("ACTION.PHP? Act = Delimg", {Imagename: PIC}, Function (msg) { IF (msg == 1) { files.html ( "削除に成功しました。"); showimg .empty(); // 画像を消去します progress.hide(); // 進行状況バーを非表示にします使用する 使用する 使用する 使用する 使用する 使用する - }); );

PHP

action.php は画像のアップロードと削除を処理する必要があります。画像をアップロードするときは、形式とサイズを確認し、move_uploaded_file() メソッドを通じて画像をアップロードし、最後にデータを json 形式で返す必要があります。画像を削除する場合は、unlink() を使用して削除操作を完了します。

コードをコピーします コードは次のとおりです: $action = $_GET['act']; if($action=='delimg'){ //画像を削除します $filename = $ _POST['imagename ']; if(!empty($filename)){ echo '1'; 削除に失敗しました。'; else{ //写真をアップロードします $picname = $_FILES['mypic']['name'] $picsize = $_FILES['mypic']['size']; if ($picname != "") {if（$ picsize＆gt; 512000）{// rime upload size s（$ ypement！= ".gif" && $ type！= ".jpg"）{ eCho '画像形式は間違っています！ '; $pic_path = " files/" move_uploaded_file($_FILES['mypic']['tmp_name'], $pic_path) } $size =round($picsize/1024,2); // kb arr = arrayに変換します（s- - - ’' being ’s - - }を使用して使用します。多くの優れたアップロード プラグインが利用可能で、フラッシュ ベースのものと jquery ベースのものがあります。代表的なものは、 jQuery File Upload です。このプラグインは、複数のファイルのアップロード、ドラッグ アンド ドロップ アップロードなどをサポートしています。興味のある学生は、まずこのプラグインについて詳しく学ぶことができます。

http://www.bkjia.com/PHPjc/327662.html

www.bkjia.com

true

http://www.bkjia.com/PHPjc/327662.html

技術記事

たとえば、ローカル画像を選択すると、その画像がすぐにアップロードされて表示されるなど、多くのプロジェクトで必要となります。この記事では、例を組み合わせて、jQuery と PHP を使用して Ajax インスタント アップロードを実装する方法を説明します...