jQuery FileUploadプラグイン
2498 ワード
jQuery FileUploadプラグイン
フロントエンドの開発の過程で、私たちはよくファイルをアップロードします.これは私たちが
ファイルのアップロード
まず、
file uploadイベント
関連プラグインの導入
プラグインの
アップロードされたファイルのサイズとファイルタイプを し、
フロントエンドの開発の過程で、私たちはよくファイルをアップロードします.これは私たちが
を使うのです.これは原生の書き方で、あまり美しく見えません.次に、優雅な実現方法についてお話しします.ファイルのアップロード
まず、
input
ボックスを非表示にし、input
ボックスのclickイベントをその上のbutton
要素にバインドします(onclick="$(this).next().click()"
によって実現されます).これにより、button
のスタイルを好みに合わせて設定でき、ファイルをアップロードする機能も達成できます.
file uploadイベント
jQuery File Upload
はJquery
ファイルアップロードコンポーネントであり、マルチファイルアップロード、キャンセル、削除をサポートし、アップロード前のサムネイルプレビュー、リスト表示画像サイズ、アップロード進捗バー表示をサポートする.さまざまな動的言語開発をサポートするサーバ側.ここでは主にファイルのアップロードとファイルのフォーマット、サイズの要求について説明します.関連プラグインの導入
fileupload
プラグインは必須で、fileupload-process
はアップロード中の各イベントの管理を担当し、fileupload-validate
は検証のサポートです.
プラグインの
アップロードされたファイルのサイズとファイルタイプを し、
messages
で に したときのプロンプト を できます. $('input[name="file"]').fileupload({
url: ' ',
Type: "POST",
autoUpload: true,
acceptFileTypes:/\.(doc|docx)$/i,//
maxFileSize: 99 * 1024 * 1024, //
//
messages: {
maxFileSize: 'File exceeds maximum allowed size of 99MB',
acceptFileTypes: 'File type not allowed'
},
processfail: function (e, data) {
var currentFile = data.files[data.index];
if (data.files.error && currentFile.error) {
// there was an error, do something about it
console.log(currentFile.error);
}
},
done: function() {
// , “ ”
},
fail: function() {
// , “ ”
},
})
Jquery
は いやすいプラグインがたくさんありますが、 つ つ するのは ではありません. うときだけ、 い を するように します.ゆっくり み ねていきましょう~~~