写真をアップロードするときに、複数の写真を同時にアップロードすることも、写真をアップロード ボックスにドラッグして直接アップロードすることもできる、非常に便利なコントロールを見つけました。インターフェイスはシンプルで、基本的にプロジェクトに直接配置できます。
まずは彼のスタイルを見てみましょう。
画像を選択した後:
$(function(){ // プラグインの初期化 $(#demo).zyUpload({ width : 650px, // width height : 400px, // width itemWidth : 120px, // ファイルの幅 itemHeight : 100px, / /file アイテムの高さ url: /upload/UploadAction, // アップロードされたファイルのパス multiple: true, // 複数のファイルをアップロードできるかどうかragDrop: true, // ファイルをドラッグしてアップロードできるかどうか del : true, // ファイルを削除できるかどうかfinishDel : false, // ファイルのアップロード完了後にプレビューを削除するかどうか /* 外部から取得したコールバック インターフェイス */ onSelect : function(files, allFiles ){ //ファイルを選択するためのコールバック メソッド console.info(現在選択されているファイル:); console.info(files);すべてのファイル); onDelete: function(file, SurplusFiles){ // ファイルを削除するためのコールバック メソッド console.info (現在削除されているファイル:); console.info(file); console.info (surplusFiles) ; }, onSuccess: function(file){ // ファイルのアップロードが成功した場合のコールバック メソッド console.info(このファイルは正常にアップロードされました:) }, onFailure: function(file);ファイルのアップロード失敗時のコールバック メソッド console.info(このファイルのアップロードに失敗しました:); console.info(file); }, onComplete: function(responseInfo){ // アップロード完了時のコールバック メソッド console.info(ファイルのアップロードが完了しました) ; コンソール .info(応答情報) } });このコントロールはフォアグラウンド処理のみであり、バックグラウンドのアップロードを自分で記述する必要があります。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。