ホームページ > 記事 > ウェブフロントエンド > ブートストラップ ファイル入力の使用法
ブートストラップ ファイル入力の使用法
- 青灯夜游転載
- 2021-01-22 10:04:224571ブラウズ
この記事では、Bootstrap ファイル入力 (最適なファイル アップロード コンポーネント) を使用して画像を表示およびアップロードする方法、およびサーバー側保存ファイルにファイルをアップロードする方法を紹介します。 。
1. まずレンダリングを見てみましょう
bootstrap 基本チュートリアル>>
2. プラグイン スタイルとスクリプトの紹介<link type="text/css" rel="stylesheet" href="${ctx}/components/fileinput/css/fileinput.css" />
<script type="text/javascript" src="${ctx}/components/fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="${ctx}/components/fileinput/js/fileinput_locale_zh.js"></script>
http://plugins.krajee.com/file-input、これは公式ですダウンロードアドレスがあるドキュメント。 3. ページ <input type="file" name="image" class="projectfile" value="${deal.image}"/>
- type=file および class=projectfile にコンポーネントを追加し、それが入力ファイル タイプであることを示します。
- name はバックグラウンドで取得キーを指定します。
- value は、表示時の画像パスを指定します。
projectfileoptions : {
showUpload : false,
showRemove : false,
language : 'zh',
allowedPreviewTypes : [ 'image' ],
allowedFileExtensions : [ 'jpg', 'png', 'gif' ],
maxFileSize : 2000,
},
// 文件上传框
$('input[class=projectfile]').each(function() {
var imageurl = $(this).attr("value");
if (imageurl) {
var op = $.extend({
initialPreview : [ // 预览图片的设置
"<img src='" + imageurl + "' class='file-preview-image' alt="ブートストラップ ファイル入力の使用法" >", ]
}, projectfileoptions);
$(this).fileinput(op);
} else {
$(this).fileinput(projectfileoptions);
}
});
- jquery を通じて対応する入力ファイルを取得し、fileinput メソッドを実行します。
- showUpload は、アップロード ボタンがあるかどうかを設定します。
- 言語は中国語を指定しています
allowedFileTypes と allowedFileExtensions。なぜ機能しないのかわかりません。 #maxFileSize はアップロード ファイル サイズを指定します - 5。ファイル file を含むフォームは、ajax
を通じて送信されます。まずはファイルを使用したフォームのレイアウトを見てみましょう。
<form class="form-horizontal required-validate" action="${ctx}/save?callbackType=confirmTimeoutForward" enctype="multipart/form-data" method="post" οnsubmit="return iframeCallback(this, pageAjaxDone)">
<div class="form-group">
<label for="" class="col-md-1 control-label">项目封面</label>
<div class="col-md-10 tl th">
<input type="file" name="image" class="projectfile" value="${deal.image}" />
<p class="help-block">支持jpg、jpeg、png、gif格式，大小不超过2.0M</p>
</div>
</div>
<div class="form-group text-center ">
<div class="col-md-10 col-md-offset-1">
<button type="submit" class="btn btn-primary btn-lg">保存</button>
</div>
</div>
</form>
- enctype="multipart/form-data" は必須です。
- οnsubmit="return iframeCallback(this, pageAjaxDone)" メソッド、ajax 経由でフォーム (iframeCallback) を送信し、アップロードが成功した後の次のステップのためにコールバック関数 (pageAjaxDone) を呼び出します。 。
- 次に、コールバック関数 pageAjaxDone を紹介します。
function pageAjaxDone(json) {
YUNM.debug(json);
YUNM.ajaxDone(json);
if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) {
var msg = json[YUNM.keys.message];
// 弹出消息提示
YUNM.debug(msg);
if (YUNM.callbackType.confirmTimeoutForward == json.callbackType) {
$.showSuccessTimeout(msg, function() {
window.location = json.forwardUrl;
});
}
}
} その主な機能は、サーバーから ajaxDone メソッドを通じて渡されたエラー メッセージを処理することです。サーバーの操作が成功すると、プロンプト メッセージが表示され、対応する URL にジャンプします。 6. サーバー側で画像を保存するバックエンドの springMVC ファイルを参照して保存してください (http://blog.csdn.net/qing_gee/article/details/51027040#t8)
ps: 上記のブログには少し疑問が残りましたが、非常に親しい友人 ihchenchen が次のリマインダーをくれるまで勉強しませんでした:
allowedFileTypes、allowedFileExtensionsなぜ効果がないのかはわかります? fileinput() メソッドが 2 回呼び出されるからです。1 回目は fileinput.js の最後の数行で、もう 1 回目は
$(this).fileinput()です。自分で書いた。 fileinput.js では、 allowedFileTypes および allowedFileExtensions の値が設定されていません。1. fileinput.js 内の呼び出しの最後の数行をコメント化します。 2. $(this).fileinput() を書かずにすべてを実行するには、「data-」メソッドを使用します。 ihchenchen さんの親切な思い出にとても感謝しています。彼の説明では私の疑問は解決しませんでしたが、私はこのような双方向の技術的なやり取りがとても好きです。以前はたくさんのブログを書いてきましたが、そんなことはめったにありませんでした。善意に基づいた効果的な答えです。中国人プログラマーや外国人プログラマーを思い出しますが、内容は衝撃的で少し恥ずかしいものです。したがって、「
これを変更するには 2 つの方法があります:
質問して、答えを取得し、気を散らすことなく。
」を達成する方法が特に重要になり、「ihchenchen」にはその精神が詰まっています。6. allowedFileTypes と allowedFileExtensions に関する疑問を解決する
私は以前、なぜこれら 2 つの属性を設定した後にブートストラップ ファイル入力が効果を示さないのかについて混乱していました。実際、それは私自身の誤解でした。つらい研究 気づいたらハッと気づいた！ ①、allowedFileTypesallowedFileTypes
アップロード可能なファイル タイプのリストを配列します。デフォルトでは、これは null に設定されており、プラグインがアップロード用のすべてのファイル タイプをサポートしていることを意味します。無効なファイル タイプが見つかった場合、msgInvalidFileType に設定されている検証エラー メッセージが表示されます。fileTypeSettings に設定されている次のタイプがセットアップに利用可能です。['image', 'html', 'text', 'video', 'audio', 'flash', 'object']
「allowedFileTypes」から始めましょう。この属性はファイル選択のタイプを示します。次の図を簡単に思い浮かべることができます:
也就是说，我们希望此时的“所有文件”处不是“所有文件”，而是“image”之类的。显然这样的逻辑并没有错，但却不适合bootstrap fileinput！
那么，这个时候我就很容易认为“allowedFileTypes” 没有起到作用！
但请看下图：
吼吼，原来是在你选择了文件后发生的类型检查！
②、allowedFileTypes工作原理
$(this).fileinput({
showUpload : false,
showRemove : false,
language : 'zh',
allowedPreviewTypes: ['image'],
allowedFileTypes: ['image'],
allowedFileExtensions: ['jpg', 'png'],
maxFileSize : 2000,
});通过fileinput方法我们加载一个bootstrap fileinput组件，那么其内部是如何实现allowedFileTypes的呢？
通过在fileinput.js文件中搜索“allowedFileTypes”关键字，我们得到如下代码：
var node = ctr + i, previewId = previewInitId + "-" + node, isText, file = files[i],
caption = self.slug(file.name), fileSize = (file.size || 0) / 1000, checkFile, fileExtExpr = '',
previewData = objUrl.createObjectURL(file), fileCount = 0, j, msg, typ, chk,
fileTypes = self.allowedFileTypes, strTypes = isEmpty(fileTypes) ? '' : fileTypes.join(', '),
fileExt = self.allowedFileExtensions, strExt = isEmpty(fileExt) ? '' : fileExt.join(', ');然后我们继续看到如下的代码：
if (!isEmpty(fileTypes) && isArray(fileTypes)) {
for (j = 0; j < fileTypes.length; j += 1) {
typ = fileTypes[j];
checkFile = settings[typ];
chk = (checkFile !== undefined && checkFile(file.type, caption));
fileCount += isEmpty(chk) ? 0 : chk.length;
}
if (fileCount === 0) {
msg = self.msgInvalidFileType.replace('{name}', caption).replace('{types}', strTypes);
self.isError = throwError(msg, file, previewId, i);
return;
}
}我们可以发现，文件类型的检查是发生在checkFile方法上，那么checkFile方法到底做了些什么呢？
defaultFileTypeSettings = {
image: function (vType, vName) {
return (vType !== undefined) ? vType.match('image.*') : vName.match(/\.(png|jpe?g)$/i);
},
...以上就是checkFile的内容。
也就是说当我们指定
allowedFileTypes: ['image'],时，就会进行image的类型检查。显然我们选择的txt文件不属于image类型，那么就会匹配不上，出现以上界面。
同时，该方法告诉我们，当不指定
allowedFileTypes: ['image'],，只指定allowedFileExtensions: ['jpg', 'png'],就会执行vName.match(/\.(png|jpe?g)$/i)，也就是文件后缀类型的检查，这点很关键啊，为我们接下来介绍“allowedFileExtensions”奠定基础。
③、allowedFileExtensions什么时候起作用
上节我们讨论完“allowedFileTypes”，捎带说了“allowedFileExtensions”，那么如何让后缀进行check呢？
$(this).fileinput({
showUpload : false,
showRemove : false,
language : 'zh',
allowedPreviewTypes: ['image'],
allowedFileExtensions: ['jpg', 'png'],
maxFileSize : 2000,
});fileinput组件此时指定的属性如上，没有了“allowedFileTypes”，并且指定允许的后缀类型为“[‘jpg’, ‘png’]”，也就是说，假如我们选择了gif的图片就会出现错误提示。
错误预期的发生了，那么请特别注意：
image: function (vType, vName) {
return (vType !== undefined) ? vType.match('image.*') : vName.match(/\.(png|jpe?g)$/i);
},fileinput.js文件中原始的代码如下：
image: function (vType, vName) {
return (vType !== undefined) ? vType.match('image.*') : vName.match(/\.(gif|png|jpe?g)$/i);
},image类型的后缀当然默认包含了gif，我只是为了举例说明，代码做了调整，请注意！
更多编程相关知识，请访问：编程视频！！
以上がブートストラップ ファイル入力の使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。