リソースを紹介します
Webアップローダーを使用してファイルをアップロードするには、JS、CSS、SWFの3つのリソースを導入する必要があります。
<！ - cssの紹介 - > <link rel = "styleSheet" type = "text/css" href = "webuploaderフォルダー/webuploader.css"> <！ - JSの紹介 - > <テキスト/javascript "src =" webuploader folder/web fold.js ">後で表示されます - >
ファイルアップロード
Webuploaderには、ファイルアップロードの基礎となる実装のみが含まれており、UIパーツは含まれていません。したがって、インタラクティブな側面を自由に再生できます。以下は、簡単なバージョンを実装する方法を示します。
下の[ファイルの選択]ボタンをクリックし、[アップロード]をクリックしてこのデモを体験してください。
HTMLパーツ
まず、ファイル情報、選択ボタン、アップロードボタンを保存するコンテナの3つの部分を含むDOM構造を準備します。
<div id = "uploader"> <！ - ファイル情報を保存するために使用 - > <div id = "thelist"> </div> <div> <div id = "picker"> select file </div> <button id = "ctlbtn"> button> </div> </div>
Webアップローダーを初期化します
詳細については、コードのコメントセクションをご覧ください。
var uploader = webuploader.create（{// swfファイルパスswf：base_url + '/js/uploader.swf'、//ファイル受信サーバー。サーバー： 'http://webuploader.duapp.com/server/fileupload.phpまたはフラッシュ：「#picker」、//デフォルトはjpegである場合は、sezize：false}）;ユーザーの選択を表示します
WebuploaderはUIロジックを処理しないため、Filequeuedイベントを聴くためにそれを実装する必要があります。
// Queue uploader.on（ 'filequeued'、function（file）{$ list.append（ '<div id = "' + file.id + '">' + '<h4>' + file.name + '</h4>' + '<p> upload ... </p>' + '</div>'）;}）;ファイルのアップロード進行状況
ファイルがアップロードされると、Web Uploaderは、ファイルオブジェクトとファイルの現在のアップロード進行を含むUploadProgressイベントを送信します。
//ファイルアップロード中にリアルタイムで表示する進行状況バーを作成します。 uploader.on（ 'uploadprogress'、function（file、percerentage）{var $ li = $（ '＃' + file.id）、$ = $ li.find（ '。progress .progress-bar'）; // if（！$パーセント。 '</div>'）。ファイルの成功と失敗処理
ファイルのアップロードが失敗した場合、uploadErrorイベントが送信され、ファイルが正常にアップロードされた場合、uploadsuccessイベントが送信されます。成功や失敗に関係なく、ファイルがアップロードされた後にUploadCompleteイベントがトリガーされます。
uploader.on（ 'uploadsuccess'、function（file）{$（ '＃'+file.id）.find（ 'p.state'）。text（ 'uploaded'）;}）; uploader.on（ 'uploaderror'、function（file）{$（ '＃'+file.id）.find（ 'p.state'）。text（ 'upload error'）;}）; uploader.on（ 'uploadcomplete'、function（file）{$（ '＃'+file.id）.find（ '。progress'）。fadeout（）;}）; uploader.on（ 'uploadcomplete'、function（file）{$（ '＃'+file.id）.find（ '。progress'）。fadeout（）;}）;画像アップロード
通常のファイルアップロードと比較して、このデモは、ファイルフィルタリング、画像プレビュー、画像圧縮アップロード、その他の機能を示しています。
HTML
上記のようにデモを実装するには、最初に追加されたファイル情報リストを保存するためにボタンとコンテナを準備する必要があります。
<！ - dom structure part-> <div id = "uploader-demo"> <！ - アイテムの保存に使用 - > <div id = "filelist"> </div> <div id = "filepicker">写真</div> </div>
JavaScript
Web Uploaderインスタンスを作成します
// web uploaderの初期化var uploader = webuploader.create（{// file.auto：true：true、// swf file path swf：base_url + '/js/uploader.swf'、//ファイル受信サーバー。 'http://webuploader.duapp.com/server/fileupload.php'、//ファイルボタンを選択します。 'gif、jpg、jpeg、bmp、png'、mimetypes： 'image/*'}}）;filequeuedイベントを聞いて、uploader.makeThumbを使用して画像プレビューを作成します。
PS：ここで入手するのはデータURLデータで、IE6とIE7は直接プレビューをサポートしていません。プレビューは、フラッシュまたはサーバーで完了できます。
// fileが追加された場合、uploader.on（ 'filequeued'、function（file）{var $ li = $（ '<div id = "' + file.id + '">' + '<img>' + '<div>' + file.name + '</div>' + ' +' </div> '）、$ img = $ li.find（' img '）; $ li）; //非画像ファイルの場合、この方法を呼び出す必要はありません。 'src'、src）;残りはアップロードステータスプロンプトです。ファイルアップロードプロセスがアップロードされると、アップロードが成功し、アップロードが失敗し、アップロードが完了すると、UploadProgress、UploadSuccess、UploadError、およびUploadCompleteイベントがそれぞれUploadProgress、UploadSucass、UploadError、UploadCompleteイベントに対応しています。
//ファイルアップロード中にリアルタイムで表示する進行状況バーを作成します。 uploader.on（ 'uploadprogress'、function（file、percerentage）{var $ li = $（ '＃'+file.id）、$ percent = $ li.find（ '。progress span'）; //繰り返し作成を回避するif（！$パーセント。 .find（ 'span'）;} $ percent.css（ 'width'、パーセンテージ * 100 + '％'）; //ファイルが正常にアップロードされ、成功したクラスをアイテムに追加し、スタイルでアップロードします。 uploader.on（ 'uploadsuccess'、function（file）{$（ '＃'+file.id）.addclass（ 'upload-state-done'）;}）; //ファイルのアップロードに失敗し、アップロードエラーが表示されました。 uploader.on（ 'uploaderror'、function（file）{var $ li = $（ '＃'+file.id）、$ error = $ li.find（ 'div.error'）; //繰り返し作成を避けるif（！$ error.length）{$ error = $（ '<div> </div>'）。 //アップロードが完了した後、成功または失敗し、最初に進行状況バーを削除します。 uploader.on（ 'uploadcomplete'、function（file）{$（ '＃'+file.id）.find（ '。progress'）。remove（）;}）;上記は、Web Uploaderを使用してマルチファイルアップロードを実現することにより、関連する知識です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！