집 > 기사 > 웹 프론트엔드 > 부트스트랩 파일 입력의 전체 예

부트스트랩 파일 입력의 전체 예

高洛峰원래의: 2017-02-24 17:53:242668검색

이 글에서는 bootstrap fileinput.js 사용법을 소개합니다. 파일 입력 플러그인은 매우 강력하고 스타일도 매우 아름답습니다. 또한 업로드된 파일 미리보기, Ajax 동기 또는 비동기 업로드, 드래그 앤 드롭 파일 업로드 등을 지원합니다. 멋진 기능을 사용하는 데 가장 적합한 파일입니다.

폴더구조

bootstrap fileinput完整实例

버전이 모두 3.x입니다

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title> New Document </title>
 <meta name="Generator" content="EditPlus">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <link href="bootstrap-3.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-fileinput-master/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="jquery-2.1.1.min.js"></script>x
<script src="bootstrap-fileinput-master/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
<script src="bootstrap-fileinput-master/js/fileinput.min.js"></script>
<script src="bootstrap-3.3.5/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="bootstrap-fileinput-master/js/fileinput_locale_zh.js"></script>
 </head>

 <body>
<form>
 <p class="" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 <p class="modal-dialog modal-lg" role="document">
 <p class="modal-content">
 <p class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
 <h4 class="modal-title" id="myModalLabel">请选择Excel文件</h4>
 </p>
 <p class="modal-body">
 <a href="~/Data/ExcelTemplate/Order.xlsx" class="form-control" style="border:none;">下载导入模板</a>
 <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />
 </p></p>
 </p>
 </p>
</form>
 </body>
</html>

<script>
$(function () {
 //0.初始化fileinput
 var oFileInput = new FileInput();
 oFileInput.Init("txt_file", "/api/OrderApi/ImportOrder");
});



//初始化fileinput
var FileInput = function () {
 var oFile = new Object();

 //初始化fileinput控件（第一次初始化）
 oFile.Init = function(ctrlName, uploadUrl) {
 var control = $(&#39;#&#39; + ctrlName);

 //初始化上传控件的样式
 control.fileinput({
 language: &#39;zh&#39;, //设置语言
 uploadUrl: uploadUrl, //上传的地址
 allowedFileExtensions: [&#39;jpg&#39;, &#39;gif&#39;, &#39;png&#39;],//接收的文件后缀
 showUpload: true, //是否显示上传按钮
 showCaption: false,//是否显示标题
 browseClass: "btn btn-primary", //按钮样式 
 //dropZoneEnabled: false,//是否显示拖拽区域
 //minImageWidth: 50, //图片的最小宽度
 //minImageHeight: 50,//图片的最小高度
 //maxImageWidth: 1000,//图片的最大宽度
 //maxImageHeight: 1000,//图片的最大高度
 //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
 //minFileCount: 0,
 maxFileCount: 10, //表示允许同时上传的最大文件个数
 enctype: &#39;multipart/form-data&#39;,
 validateInitialCount:true,
 previewFileIcon: "<i class=&#39;glyphicon glyphicon-king&#39;></i>",
 msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
 });

 //导入文件上传完成之后的事件
 $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
 $("#myModal").modal("hide");
 var data = data.response.lstOrderImport;
 if (data == undefined) {
 toastr.error(&#39;文件格式类型不正确&#39;);
 return;
 }
 //1.初始化表格
 var oTable = new TableInit();
 oTable.Init(data);
 $("#p_startimport").show();
 });
}
 return oFile;
};
</script>

공유를 통해서만 지식이 전파되고, 새로운 지식이 홍보될 수 있으며, 여기에 작성된 모든 텍스트/블로그는 기본적으로 인터넷에서 정보를 검색한 후 기록한 것입니다. 여기로 옮겼고 때로는 내 아이디어도 추가했습니다. 여러분 모두 마음에 드셨으면 좋겠습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

부트스트랩 파일 입력 전체 예제와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

성명：

이전 기사：부트스트랩 파일입력 플러그인 사용 프로젝트 요약다음 기사：부트스트랩 파일입력 플러그인 사용 프로젝트 요약

부트스트랩 파일 입력의 전체 예

관련 기사