ブートストラップ ファイル入力の使用法

この記事では、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 は、表示時の画像パスを指定します。

4. 初期化

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="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/024/f1a455e09845f106ee9dbc2081f39ac1-4.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;" + imageurl + "&#39; class=&#39;file-preview-image&#39; 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 の値が設定されていません。

これを変更するには 2 つの方法があります:

1. fileinput.js 内の呼び出しの最後の数行をコメント化します。

2. $(this).fileinput() を書かずにすべてを実行するには、「data-」メソッドを使用します。

ihchenchen さんの親切な思い出にとても感謝しています。彼の説明では私の疑問は解決しませんでしたが、私はこのような双方向の技術的なやり取りがとても好きです。以前はたくさんのブログを書いてきましたが、そんなことはめったにありませんでした。善意に基づいた効果的な答えです。中国人プログラマーや外国人プログラマーを思い出しますが、内容は衝撃的で少し恥ずかしいものです。したがって、「

質問して、答えを取得し、気を散らすことなく。

」を達成する方法が特に重要になり、「ihchenchen」にはその精神が詰まっています。

6. allowedFileTypes と allowedFileExtensions に関する疑問を解決する

私は以前、なぜこれら 2 つの属性を設定した後にブートストラップ ファイル入力が効果を示さないのかについて混乱していました。実際、それは私自身の誤解でした。つらい研究 気づいたらハッと気づいた！

①、allowedFileTypes

allowedFileTypes

アップロード可能なファイル タイプのリストを配列します。デフォルトでは、これは 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(&#39;{name}&#39;, caption).replace(&#39;{types}&#39;, 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 サイトの他の関連記事を参照してください。