この記事では、複数のファイルをアップロードし、SWFUPLOADのファイルの数を制限する方法について説明します。次のように、参照のために共有してください。
SWFUPLOADは、FlashとJavaScriptに基づいたクライアントファイルアップロードコンポーネントです。
handlers.jsファイル
完全なファイルキューイング（filequeued）→
ファイルの選択（FileDialogComplete）→起動アップロード（uploadstart）→アップロード処理（UploadProgress）→Upload Success（uploadSuccess）→Upload Complete（uploadComplete）→
queecomplete
上記のように、上記のコールバック関数が単一選択ファイルによって順番に実行される場合、複数のファイルが選択されていることに注意する必要があります。 FileQueuedとQueeCompleteは1回だけ実行されますが、FileDialogComplet ...→UploadCompleteはファイルごとに1回実行されます。
公式の例を参照して基本関数を完了した後、Imitation GanjiはIFRAMEメソッドを採用します。
サムネイルのプレビューの数と削除およびアップロードされた写真の数の制限を達成するために
サムネイルを表示し、サムネイルを削除するボタンを生成し、
Thumbimagesは、親ページにサムネイルのDivを表示します
SRC_Sは、生成されたサムネイルアドレスです
SRC_Bは元の画像アドレスです
ServerDataは、画像アップロード処理ページで返されるデータです。成功の形式で返されます|サムネイルアドレス|元のアドレス|オリジナルアドレス
function uploadsuccess（file、serverdata）{try {var result = serverdata.split（ '|'）; if（result [0]！= 'success'）{var progress = new fileProgress（file、this.customsettings.progresstarget）; Progress.setError（）; Progress.setStatus（serverData）; Progress.togglecancel（false）; } else {var progress = new fileProgress（file、this.customsettings.progresstarget）; Progress.setComplete（）; Progress.setStatus（ "アップロード完了"）; Progress.togglecancel（false）; var img_url_s = result [1]; var img_url_b = result [2]; addimage（img_url_s、img_url_b）; }} catch（ex）{this.debug（ex）; }}関数addimage（src_s、src_b）{var newdiv = parent.document.createelement（ "div"）; newdiv.style.margin = "5px"; newdiv.style.height = "60px"; newdiv.style.width = "80px"; newdiv.style.border = "1px solid＃7f9db9"; newdiv.style.cssfloat = "left"; newdiv.style.stylefloat = "left"; newdiv.style.position = "relative"; var newa = parent.document.createelement（ "a"）; newa.classname = "delete"; newa.title = "delete"; Newa.href = "JavaScript ::"; newa.onclick = function（）{deldiv（newdiv）;}; var newinput_s = parent.document.createelement（ "input"）; newinput_s.type = "hidden"; newinput_s.value = src_s; newinput_s.name = "image_s []"; Newa.AppendChild（newinput_s）; var newinput_b = parent.document.createelement（ "input"）; newinput_b.type = "hidden"; newinput_b.value = src_b; newinput_b.name = "image_b []"; Newa.AppendChild（newinput_b）; var newimgdiv = parent.document.createelement（ "div"）; var newimg = parent.document.createelement（ "img"）; newimg.style.height = "60px"; newimg.style.width = "80px"; newimgdiv.appendchild（newimg）; newdiv.appendChild（newimgdiv）; Newdiv.AppendChild（Newa）; parent.document.getElementById（ "Thumbimages"）。AppendChild（newDiv）; if（newimg.filters）{try {newimg.filters.item（ "dxmingagetransform.microsoft.alpha"）。opacity = 0; } catch（e）{//最初に設定されていない場合、ブラウザはエラーをスローします。これにより、まだ設定されていない場合に設定されます。 newimg.style.filter = 'progid：dmimagetransform.microsoft.alpha（opacity =' + 0 + '）'; }} else {newimg.style.opacity = 0; } newimg.onload = function（）{fadein（newimg、0）; }; newimg.src = src_s;} function fadein（element、ofacity）{var decoidopacityby = 5; varレート= 30; // 15 fps if（不透明<100）{不透明 += RedoceOpacityBy; if（不透明> 100）{Opacity = 100; } if（element.filters）{try {element.filters.item（ "dxmingagetransform.microsoft.alpha"）。opacity = opacity; } catch（e）{//最初に設定されていない場合、ブラウザはエラーをスローします。これにより、まだ設定されていない場合に設定されます。 element.style.filter = 'progid：dmimagetransform.microsoft.alpha（ofacity =' + opacity + '）'; }} else {element.style.opacity = opacity / 100; }} if（ofacity <100）{settimeout（function（）{fadein（element、ofacity）;}、rate）; }}アップロードされたファイルの残り数の処理に関して
関数queuecomplete（numfilesuploaded）{this.setbuttondisabled（false）; var stats = this.getStats（）; var status = document.getElementById（ "divstatus"）; status.innerhtml = "uploaded" + stats.successful_uploads + "ファイル、アップロード" + parseint（this.settings ['file_upload_limit'] -Successful_uploads） + "files";} mydiv（mydiv. removech）{mydiv.parentnodiv） // swfu iframeページでswfuを参照swfu = new Swfupload（settings）; var stats = swfu.getStats（）; stats.successful_uploads-; swfu.setstats（統計）; var status = document.getElementById（ "divstatus"）; status.innerhtml = "uploaded" + stats.successful_uploads + "ファイルもアップロードできます" + parseint（swfu.settings ['file_upload_limit'] - stats.successful_uploads） + "files";}iframeの使用による可能性があります
Deldiv関数のSWFUをこれに置き換えることはできません
全体的な効果は、図に示されているとおりです。
写真をアップロードして再度変更した後、アップロードされた写真の数を取得し、それらをswfuploadに結合する必要があります
バックグラウンドからPHPを介してアップロードされた画像パスを取得し、Smartyを介してJSアレイに渡します
var img_arr = new array（）; {is set（$ img_arr）} {section name = 'img_arr' loop = $ img_arr} img_arr [{$ smarty.section.img_arr.index}] = new array（ '{$ img_arr [img_arr] .images_s}'、 '{$ img_arr [img_arr] .images_b}'）; {/section} {/if}次の情報を取得するには、swfuploadドキュメントを照会します
flashready（）
このイベント関数は内部イベントであり、書き直すことはできません。このイベントは、SWFuploadがインスタンス化され、ロードされたフラッシュがすべての初期化操作を完了するとトリガーされます。
リマインダー：対応する設定のswfupload_loaded_handler
したがって、swfupload_loaded_handlerをswfupload設定で設定します
swfupload_loaded_handler：loaded、
次に、handlers.jsでロードされた関数を定義します
function loaded（）{if（img_arr.length！= 0）{for（val in img_arr）{addimagefromdb（img_arr [val] [0]、img_arr [val] [1]、this）; }}}AddimageFromDB関数を呼び出して、アップロードされた画像の数を変更し、アップロードされた画像のサムネイルを生成します
//アップロードされた画像関数の初期化addimagefromdb（src_s、src_b、swfu）{var stats = swfu.getstats（）; stats.successful_uploads ++; swfu.setstats（統計）; var status = document.getElementById（ "divstatus"）; status.innerhtml = "uploaded <font color = 'green'>" + stats.successful_uploads + "</font> zhang、<font color = 'red'>" + parsetings（swfu.settings ['file_upload_limit'] -Stats.fuls.fuls.fuls.fulsfuls.fuls.fuls.fuls.fuls.fuls.fuls.fulsfulssfulssfulssfulssfuls.sets.fulssfulssfuls.fulloads "; addimage（src_s、src_b）;}JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズムスキルの要約」、「JavaScriptアニメーション効果とテクニックの概要」、「Javascriptエラー、および「Javascriptデータ構造」の概要」の概要の要約の要約をご覧ください。 JavaScriptトラバーサルアルゴリズムとテクニック」、および「JavaScriptの数学的操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。