jQuery FileUploadプラグイン


jQuery FileUploadプラグイン
フロントエンドの開発の過程で、私たちはよくファイルをアップロードします.これは私たちがを使うのです.これは原生の書き方で、あまり美しく見えません.次に、優雅な実現方法についてお話しします.
ファイルのアップロード
まず、inputボックスを非表示にし、inputボックスのclickイベントをその上のbutton要素にバインドします(onclick="$(this).next().click()"によって実現されます).これにより、buttonのスタイルを好みに合わせて設定でき、ファイルをアップロードする機能も達成できます.

file uploadイベントjQuery File UploadJqueryファイルアップロードコンポーネントであり、マルチファイルアップロード、キャンセル、削除をサポートし、アップロード前のサムネイルプレビュー、リスト表示画像サイズ、アップロード進捗バー表示をサポートする.さまざまな動的言語開発をサポートするサーバ側.ここでは主にファイルのアップロードとファイルのフォーマット、サイズの要求について説明します.
関連プラグインの導入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は いやすいプラグインがたくさんありますが、 つ つ するのは ではありません. うときだけ、 い を するように します.ゆっくり み ねていきましょう~~~