メインテキストを紹介する前に、Pluploadの知識を紹介しましょう。
Pluploadの紹介
Pluploadは、Tinymceの開発者によって開発されており、コンテンツ管理システムまたは同様のアップロードプログラムで非常に利用可能なアップロードプラグインを提供します。 Pluploadは現在、コアAPIとjQueryアップロードキューコンポーネントに分割されています。これにより、直接使用するか、自分でカスタマイズできます。
Plupload機能
Pluploadは、ファイルを選択してファイルをアップロードするために、jqueryコンポーネントをキューコンポーネントとして使用します。
Pluploadは、Flash、Silverlight、HTML5、Gears、BrowserPlus、およびFileuPloadを使用して、ファイルテクノロジーエンジンをアップロードします。
Pluploadを使用すると、Plupload Core APIを使用してファイルを選択してファイルをアップロードできるようにカスタマイズを可能にします。
JavaScriptは、ファイル選択ダイアログボックスをアクティブにするために使用されます。このファイル選択ダイアログボックスは、ユーザーが個別のファイルまたは複数のファイルを選択できるように設定できます。選択したファイルタイプも制限される可能性があるため、ユーザーはJGP; gifなど、指定された適切なファイルのみを選択できます。
Pluploadは、アップロードプロセス中にいくつかのイベントをカスタマイズし、独自の処理方法を記述できます。
選択したファイルのアップロードは、ページとフォームに依存しません。各ファイルは個別にアップロードされ、サーバー側のスクリプトが時点で1つのファイルをより簡単に処理できるようにします。特定の情報については、Pluploadの公式Webサイト：http：//www.plupload.com/をご覧ください。
背景：プロジェクトで使用されるフロントエンドファイルアップロード制御はアップロードされ、すべてがしばらく平和でした。 「良いニュース」はシーンから来て、顧客はiPadシステムを使用したいと思っていて、写真をアップロードしたいと考えていました。顧客マスターは額を平手打ちし、R＆Dで残業しなければなりませんでした。ご存知のように、uploadifyはフラッシュに依存するため、iOSおよびMacシステムでは不可能です。それで、いくつかのGoogleの後、私はPluploadを見つけました。始めるのは簡単です。
ページHTMLコード：
ヘッドタグには、必要なJSファイルが含まれています
<script type = "text/javascript" src = "js/jquery-1.9.1.min.js">/scrip>
<！ - アートダイアログ - >
<script type = "text/javascript" src = "artdialog/artdialog.source.js？skin = blue"> </script>
<！ - plupload->
<script type = "text/javascript" src = "plupload/plupload.full.js"> </scrip>
ボディタグのページ要素
<！ - ポップアップボックスをトリガー - > <a id = "uploadbtn" href = "＃"> file upload </a> <div id = "uploadcontent" stiled = "display：none; heigh：anuverflow-x; href = "javascript：void（0）;"> select file </a> </div> <div id = "uploadfilequeue" style = "border：" border： "border：" solid＃a7c5e2; height：228px; width：350px; "> </div> </div> <pre id ="
スクリプトタグのコード
var globaluploader; function _plupload（）{var uploader = new plupload.uploader（{runtimes： 'html5、flash、silverlight、html4'、browse_button： 'uploadify'、// domオブジェクトのID属性のID属性をbrowsing browsentにbrowsing browsent：uplodolodyconted： browser_button： '/uploadaction！localupload.action' 、//receive action flash_swf_url file：'/folder/js/plupload/moxie.swf',silverlight_xap_url： '/folder/js/plupluad/moxie.xip'ftters：'/folder/js/ '100MB'、//アップロードファイルサイズmime_types：[// upload uploadファイルタイプ{imageファイル "、拡張機能：" jpg、gif、png "}]}、init：{costinit：function（）{$（ '＃uploadfilequeue'）。前にupload：function（up、file）{//ボタンをクリックした後にアップロードする前に、残りのスペースなどを確認できます。 $ .ajax（{url： "/folder/personal/personalaction！getNewFileName.action"、type： "post"、async：false、data：{'upfilename'：file.name、 'globalpid'：globalpid '：blobalpid}、datatype： "json"、success（data）{/settion（/settoption（' mutpttion） {upfileName：data.newfileName、upfiletype：file.name.split（ "。"）[file.name.split（ "。"）。 file ["+file.name+"] upload "、 ''）; // $（ '＃uploadify'）。 id}}）;}、href = "javascript：_plupload_removefile（ ' +i +'、 ' +file.id +'）"> </a> </div> <span> ' +file.name +'（ ' +plupload.formatsize（file.size） + '）</span> <b> </b> <div> <div> </div> </div> </div> </div>'）; i ++;};}、uploadprogress：function（up、file）{//クリックしてアップロードを起動してトリガーします。ここでは、file.percentdocument.getElementbyId（file.id）.getElementsByTagname（ 'b'）[0] .innerhtml = '<span> - ' + file.percent + "％</span>"; //パーセント$（ '＃' + file.id）.find（ 'f cent-bar'）。 '％'）; // Progress bar}、エラー：function（up、err）{//エラートリガーdocument.getElementbyid（ 'console'）。innerhtml + = "/nerror＃" + err.code + "：" + err.message;}、fileuploaded：function（up、up、file、infoctided after upshalld updected/file file file is a upggerloded/file file file file file file file file file file ased. = eval（ "（" + info.response + "）"）; //サーバーによって返されるデータ、ページのファイルリストを変更できます。 uploader;} function popupdialog（）{artdialog（{id： 'file-upload'、title： 'file upload'、sixed：true、lock：true、content：$（ "＃uploadcontent"）[0]、button：[{name： 'start upload'、focud：true、callback（ 'close'、callback：function（）{$（ '＃uploadfilequeue'）。html（ ''）; // upload queue queue globaluploader.files.splice（0、globaluploader.files.length）; //アップロードqueueのコンテンツをクリアします; function（）{$（ '＃uploadfilequeue'）。html（ ''）; // upload queue globaluploader.files.splice（0、globaluploader.files.length）; //アップロードのコンテンツをクリアします。 queue}}背景コードは書きません。 struts2バックエンドアクションを使用して、プライベートファイルファイルを使用して受信したファイルを受信しました。他の名前をnullに変更します。この値をまだコントロールに設定する方法がわかりません。
次に、これが効果です
これらのCSSスタイルをProgress Barに追加したい場合は、コントロールできます
<style type = "text/css">＃uploadfilequeue {position：relative; left：0; top：0; border：1px solid＃a7c5e2; margin-bottom：height：228px; width：350px; anoverflow-x：hidden; hidden; anuverflow-y：autem odiTem（up-queue-item-x-color：＃55F5 {＃55F55F5F5F5F5F5 */background-color：#fff; -webkit-border-radius：3px; border-radius：3px; font：11px verdana、geneva、sans-serif;/* margin-top：5px; */マージン：5px 5px 5px 5px; max-width：350px; padding：10px;}。uploadify-progress {background-color：＃e5e5e5; margin-top：10px; width：100％;}。最終効果。どんなに、私はまた、キューフォークでファイルを削除するためにアップロードしたい、OK
これをスタイリッシュに追加します
.uploadify-queue-item .cancel a {background：url（ 'js/uploadify-cancel.png'）0 0 no-repeat; float：right; height：16px; text-indent：-9999px; width：16px;}もちろん、削除されたJSコードも追加する必要があります。ここには公式APIにremoveFile（ファイル）がありますが、ここで使用するのは簡単ではありません。したがって、別の方法は分割（num、長さ）に使用され、numは最初から削除され、長さは削除された数です。
function _plupload_removefile（removenum、fileid）{globaluploader.files.splice（removenum、1）; // files $（fileid）.fadeout（）;}を削除する最終効果。
上記は、マルチプラットフォームアップロードファイルを実現するために編集者が紹介したPlupload+ArtDialogです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！