この記事では、webupload による大きなファイルのアップロードの 3 つの例を紹介します。ファイル アップロード、画像アップロード、HTML5 ドラッグ アンド ドロップ画像アップロードです。これは携帯電話のアップロードにも適用できます。 //写真をアップロード<br>
// Web アップローダーを初期化します<br>
var Uploader = WebUploader.create({<br>
<br>
// ファイルを選択した後に自動的にアップロードするかどうか。 <br>
自動: true、<br>
<br>
// swf ファイルのパス<br>
swf: 'js/Uploader.swf',<br>
<br>
// ファイル受信サーバー。 <br>
サーバー: 'upload.php',<br>
<br>
// ファイルを選択するボタン。オプション。 <br>
// 現在の操作に基づいて内部的に作成され、入力要素またはフラッシュである可能性があります。<br>
選択: '#imgPicker'、<br>
<br>
// 画像ファイルの選択のみを許可します。 <br>
受け入れる: {<br>
タイトル: '画像',<br>
拡張子: 'gif,jpg,jpeg,bmp,png',<br>
mimeTypes: 'image/*'<br>
}<br>
});<br>
<br>
//ファイル追加時<br>
Uploader.on( 'fileQueued', function( file ) {<br>
var $list = $("#fileList"),<br>
$li = $(<br>
'<div id="' + file.id + '" class="ファイルアイテムのサムネイル">'
「<img alt="webupload は大きなファイルをアップロードする方法を教えます" >」+<br>
「<div class="info">」 + ファイル名 + '</div>'
'</div>'<br>
)、<br>
$img = $li.find('img');<br>
<br>
<br>
// $list はコンテナー jQuery インスタンスです<br>
$list.append( $li );<br>
<br>
//サムネイルを作成 <br>
// 画像ファイル以外の場合、このメソッドを呼び出す必要はありません。 <br>
// サムネイル幅 x サムネイル高さは 100 x 100 です<br>
Uploader.makeThumb( file, function( error, src ) {<br>
if (エラー) {<br>
$img.replaceWith('<span>プレビューできません</span>');<br>
戻る;<br>
}<br>
<br>
$img.attr( 'src', src );<br>
}、100、100 );<br>
});<br>webupload リアルタイム ドラッグ アップロード デモンストレーション: http://www.sucaihuo.com/js/901.html <br>
アップロードの進行状況を表示する強力なファイル アップロード プラグイン - WebUploader.zip
( 188.94 KB ダウンロード: 21 回 )