BootStrap은 파일 업로드 시 진행 상황 표시를 구현합니다.
- PHPz원래의
- 2018-04-18 10:29:132393검색
이번에는 파일 업로드 시 진행 상황을 표시하는 BootStrap을 가져오겠습니다. 파일 업로드 시 진행 상황을 표시하는 BootStrap의 주의 사항은 무엇입니까? 다음은 실제 사례입니다.
【관련 영상 추천 : 부트스트랩 튜토리얼】
1. 고민하다가 드디어 업로드 성공 후 데이터베이스에 경로를 추가하면 됩니다. 업로드가 성공한 후 추가하는 방법에 대해 데이터베이스에 경로를 추가하고 마침내 완료했습니다. 이전에 ajax가 파일을 업로드할 수 없다고 말해야 했습니다. js로 작성하고 파일 업로드 버튼의 스타일을 변경했습니다. 하지만 부트스트랩이 실제로 작동할 것이라고는 예상하지 못했습니다. 굉장하고 스타일이 꽤 좋으며 미리보기, 사진, 파일 크기 제한, 형식 등이 가능합니다. ., 진행률 표시줄도 있습니다.
배경 코드는 이전에 작성되었습니다
프론트엔드 코드입니다
기억하세요: 인증할 때 콘솔을 사용하여 인증해 보세요. 때로는 코드가 올바르게 작성되었지만 경고가 표시되지 않을 수도 있습니다
console.log("aaaa");
1. 해당 js 및 스타일 가져오기
<script type="text/javascript" src="jsbootstrap/locales/zh.js"></script> <script type="text/javascript" src="jsbootstrap/fileinput.min.js" ></script> <link href="css/css/fileinput.min.css" rel="external nofollow" rel="stylesheet">
2. 모달 상자에 추가하세요. name 속성은 배경의 code 속성과 관련이 있으며 클래스는 file
<input type="file" name="my" class="file" id="aaa" data-show-upload="true" data-show-caption="true"><br> <span style="font-family: Arial, Verdana, sans-serif;">3.具体的文件上传的方法</span>
이어야 합니다. 업로드 성공 후 ajax 방식이 있는데 정말 대단하네요
때로는 시도해 보기 전에는 그것이 작동하는지 알 수 없습니다
//上传文件
Initfileinput = function (uploadurl){
$("#aaa").fileinput({
//uploadUrl: "../fileinfo/save", // server upload action
uploadUrl:"https://localhost:8080/GD/UploadAction_execute.action",
required: true,
showBrowse: true,
browseOnZoneClick: true,
dropZoneEnabled: false,
allowedFileExtensions: ["jpg", "xlsx"],//只能选择xls,和xlsx格式的文件提交
//maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
layoutTemplates:{ actionUpload:''},
/*上传成功之后运行*/
fileuploaded:$("#aaa").on("fileuploaded", function (event, data, previewId, index) {
console.log("Upload success");
var a = document.getElementById('aaa').value;
console.log(a);
$.ajax({
type:"post",
async:false,
url:"https://localhost:8080/GD/UploadAction_add.action",
data:{
"filepath.path" : a
},
dataType:"json",
success:function () {
console.log("添加成功");
}
})
}),
/*上传出错误处理*/
fileerror:$('#aaa').on('fileerror', function(event, data, msg) {
console.log("Upload failed")
}),
});
}
Initfileinput (); //记得加载，初始化
이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!
추천 자료:
위 내용은 BootStrap은 파일 업로드 시 진행 상황 표시를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!