이번에는 ajax+html 구현 파일 업로드 방법과 ajax+html 파일 구현 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.
인용문: 우리 모두 알고 있듯이 HTML로 파일을 업로드하려면 type=file이라는 단 하나의 입력만 필요합니다. 하지만 이 라벨의 스타일은 사실 언급할 가치가 없습니다. 스타일을 바꾸는 것은 아마도 어려울 것입니다. 하지만 오늘은 파일 업로드에 대한 몇 가지 팁에 대해 이야기해 보겠습니다.
1. 스타일을 맞춤설정하는 방법은 무엇인가요?
1) 과 같이 보고 싶은 스타일에 따라 정의하면 됩니다. 이미지 효과는 텍스트 명령일 수 있으며 원하는 대로 변경할 수 있습니다! 버튼을 사용하면 업로드할 파일을 선택할 때 이름을 저장하는 파일 이름 컨테이너도 필요하므로 업로드가 지루하고 이해하기 어려워지는 것을 방지할 수 있습니다.
2) 실제로 업로드해야 하는 파일 컨트롤을 추가하고 와 같은 display:none 속성을 설정하여 실제 업로드할 위치가 있도록 합니다. 파일을 업로드합니다. 따라서 파일 업로드 인터페이스가 얼마나 아름다운지는 여러분의 상상력에 달려 있다고 할 수 있습니다!
2. 이벤트를 트리거하는 방법은 무엇입니까?
트리거 포인트는 작성하는 스타일이어야 하지만 실제로 작동하는 요소는 숨겨져 있지만 클릭 효과에는 영향을 미치지 않습니다. $('#target-file').trigger('click');
3. 여러 파일을 선택하시겠습니까?
여러 파일을 업로드하려면 HTML에서 파일의 multiple=true를 사용하면 됩니다. 물론 swfupload와 같은 타사 업로드 컨트롤을 선택할 수도 있지만 그렇지 않은 사람들에게는 좋습니다. 플러그인을 사용하고 싶은데 작동하지 않습니다. 부터
인터페이스 미화
실제로 jqueryui와 같은 플러그인을 사용할 수 있습니다.친숙한 상호 작용을 원한다면 새로 고침 없는 전환, 비동기 업로드 및 제출과 같은 ajax 기술이 사용됩니다. , 실제로 pushState를 사용하여 ajax 경로를 유지할 수도 있으며, pjax를 교체하는 pjax를 대체합니다.Form 유효성 검사
: validform.js
파일의 비동기 제출: jquery.form.js친숙한 팝업 프롬프트: layer.js
5. 호환성 문제가 있나요?
인터페이스 작업을 할 때 가장 두렵고 중요한 것은 다양한 브라우저 간의 호환성 문제입니다. 참고할 주요 사항은 다음과 같습니다.
테이블 너비가 일관되지 않게 처리됩니다.선택, 입력 디스플레이 높이가 일치하지 않습니다.
경고 팝업창이 일치하지 않습니다.
6. 데모 코드
<a href="javascript:;" up-type-id="1" class="btn btn-default small-btn switch-upload-method"><span>本地上传</span></a>
<a href="javascript:;" up-type-id="2" class="upload-file-instead btn btn-default small-btn switch-upload-method"><span>打包工具</span></a>
<input type="file" name="apkFiles[]" id="local-upload-real-file" class="upload-file-real hide" response-id="local-upload-container" multiple='true' />
<input type="file" name="apkToolFiles[]" id="apk-tool-real-file" class="upload-file-real hide" response-id="apk-tool-container-textarea" />
<script>
$(function(){
var alertTitle = '系统提示：';
var submitId = '#do-submit';
$('#taskForm').Validform({
btnSubmit: submitId,
tiptype: 1,
ignoreHidden: true,
dragonfly: false,
tipSweep: true,
label: ".label",
showAllError: false,
postonce: true,
ajaxPost: true,
datatype:{
},
beforeCheck:function(curform){
},
beforeSubmit:function(curform){
$('.upload-file-real').attr('disabled', 'disabled');
$(submitId).attr('disabled', 'disabled'); //提交前禁用按钮
ajaxSubmitForm(curform);
$(submitId).removeAttr('disabled'); //失败后恢复可提交
return false;
},
submitForm: function(){} //不再起作用
});
//切换上传方法
$('.switch-upload-method').off().on('click', function(){
// $(submitId).attr('disabled', 'disabled');
var pObj = $(this).parent().find('.switch-upload-method');
var index = pObj.index(this);
var uploadTypeId = $('#upload-type-id').val(); //上传方式：1:打包工具;2:本地上传,0:没有上传方式
var uploadType = $(this).attr('up-type-id');
if(parseInt($('#sub-channel-count').html()) > 0){
if(uploadTypeId != uploadType){
layer.alert('还有子渠道包数据，不能完成切换，请先确认清除再切换！');
return false;
}
}
pObj.not(':eq(' + index + ')').removeClass('btn-danger').addClass('btn-default');
pObj.eq(index).removeClass('btn-default').addClass('btn-danger');
if(uploadType == 36){ //local-upload
$('#upload-type-id').val(uploadType);
$('#init-apk-container').show();
$('#apk-tool-container').hide();
$('#upload-main-control').find('.del-it-main').css({display: 'inline-block'});
$('#local-upload-real-file').trigger('click');
}else if(uploadType == 35){ //apk-tool
$('#upload-type-id').val(uploadType);
$('#init-apk-container').hide();
$('#local-upload-container').hide();
$('#upload-main-control').find('.del-it-main').hide();
$('#apk-tool-container').show();
}
});
//本地上传
$('#local-upload-real-file').off().on('change', function(){
if(!$(this).val()){
return false;
}
file_size = 0;
filepath = $(this).val();
maxFileSize = 30 * 1024 * 1024;
var browserCfg = {};
var ua = window.navigator.userAgent;
if (ua.indexOf("MSIE") >=1 ){
browserCfg.ie = true;
}else if(ua.indexOf("Firefox") >=1 ){
browserCfg.firefox = true;
}else if(ua.indexOf("Chrome") >=1 ){
browserCfg.chrome = true;
}
if (browserCfg.ie) {
var img = new Image();
img.src = filepath;
file_size = img.fileSize;
while (true) {
if (img.fileSize > 0) {
if (img.fileSize > maxFileSize) {
alert("上传包超过30MB限制，请使用打包工具上传！");
return false;
}
break;
}
}
} else {
file_size = this.files[0].size;
if (file_size > maxFileSize) {
alert("上传包超过30MB限制，请使用打包工具上传！");
return false;
}
}
var responseObjId = $(this).attr('response-id');
var responseObj = $('#' + responseObjId);
$('#taskForm').ajaxSubmit({
url:'/aa/bb/uploadTmpApk',
resetForm: false,
dataType: 'json',
beforeSubmit: function(option){
window.loading = layer.load(2);
},
success: function(data, statusText){
layer.close(window.loading);
if(data.status == 1){
$('#version-identifier').val(data.version);
responseObj.html(data.apkInfoHtml);
responseObj.show();
var delObj = $('#upload-main-control').find('.del-it-main');
delObj.css({'display': 'inline-block'});
$('#sub-channel-count').html(data.apkTotal);
$('#init-apk-container').hide();
$(submitId).removeAttr('disabled');
}else{
layer.alert(data.info, {title: alertTitle});
}
},
error: function(data){
layer.close(window.loading);
layer.alert('未知错误，请稍后再试！');
}
});
return false;//防止dialog 自动关闭
});
//打包工具
$('#apk-tool-real-file').off().on('change', function(){
if(!$(this).val()){
return false;
}
var responseObjId = $(this).attr('response-id');
var responseObj = $('#' + responseObjId);
$('#Form').ajaxSubmit({
url:'/aa/bb/uploadTmpApkTool',
resetForm: false,
dataType: 'json',
beforeSubmit: function(option){
window.loading = layer.load(2);
},
success: function(data, statusText){
layer.close(window.loading);
if(data.status == 1){
$('#version-identifier').val(data.version);
responseObj.html(data.infoHtml);
var parentContainer = responseObj.parent().parent(),
nameContainer = parentContainer.find('.apk-name-container'),
delObj = parentContainer.find('.del-it-apk-tool');
nameContainer.html(data.apkName);
nameContainer.attr('title', data.apkName);
$('#apk-tool-file-tmp').html(data.fileInfo);
$(submitId).removeAttr('disabled');
}else{
layer.alert(data.info, {title: alertTitle});
}
},
error: function(data){
layer.close(window.loading);
layer.alert('未知错误，请稍后再试！');
}
});
return false;//防止dialog 自动关闭
});
$('.apk-tool-upload-button').on('click', function(){
$('#apk-tool-real-file').trigger('click');
});
});
</script>양식을 제출하고 ajax로 파일 업로드를 구현하는 방법
Ajax가 json 형식 데이터를 백그라운드로 전송할 때 오류를 처리하는 방법
위 내용은 ajax+html로 파일 업로드를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
