ajax html 기반 파일 업로드 기술 총화
1.스타일 을 어떻게 정의 하나 요?
1)、원 하 는 스타일 로 만 정의 하면 됩 니 다.예 를 들 어,배경 그림 효과 일 수도 있 고 문자 지시 일 수도 있 습 니 다.어쨌든 어떻게 고치 고 싶 은 지!버튼 이 있 으 면 파일 을 업로드 할 때의 이름 을 저장 하고 업로드 가 지루 해 보이 지 않도록 파일 이름 용기 가 필요 합 니 다.
2)업로드 할 파일 컨트롤 을 추가 하고 속성 display:none 을 설정 합 니 다.예 를 들 어와 같이 파일 을 올 리 는 곳 이 생 겼 습 니 다.그래서 파일 을 올 리 는 화면 이 얼마나 예 쁜 지 는 상상력 에 달 려 있다 고 할 수 있 습 니 다!
2.사건 을 어떻게 촉발 합 니까?
이것 은 중점 입 니 다.터치 하 는 점 은 자신 이 쓴 스타일 이 어야 합 니 다.진정 으로 작용 하 는 요 소 는 숨겨 져 있 지만 클릭 효과 에 영향 을 주지 않 습 니 다.클릭 이벤트 만 터치 하면 됩 니 다.예 를 들 어$('#target-file').trigger('click');
3.파일 을 더 선택 하 시 겠 습 니까?
다 중 파일 업로드,html 의 한 file 의 multiple=true 만 사용 하면 됩 니 다.물론 제3자 업로드 컨트롤 도 선택 할 수 있 습 니 다.예 를 들 어 swfupload 는 효과 가 정말 좋 지만 사용 하고 싶 지 않 은 플러그 인 에 게 는 도움 이 되 지 않 습 니 다.
4. 관련 플러그 인?
인터페이스 미 화 는 jquery ui 등 플러그 인 을 사용 할 수 있 습 니 다.
우호 적 인 상호작용 을 하려 면 ajax 기술 을 사용 합 니 다.새로 고침 전환,비동기 업로드,제출 이 없습니다.마지막 으로 ajax 의 경로 도 보류 할 수 있 습 니 다.push State,replace State 를 사용 하여 pjax 를 실현 합 니 다.
폼 검증:validform.js
비동기 제출 파일:jquery.form.js
우호 적 인 팝 업 창 알림:layer.js
5.약간의 호환성 문제?
인터페이스 작업 을 할 때 가장 두 려 운 것 도 중요 한 작업 입 니 다.바로 각 브 라 우 저 간 의 호환성 문제 입 니 다.다음은 주로 몇 가 지 를 참고 하 시기 바 랍 니 다.
table 너비 의 처리 방식 이 일치 하지 않 습 니 다.
select,input 디 스 플레이 높이 가 일치 하지 않 음;
alert 탄창 이 일치 하지 않 음;
...
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>
css,js 를 합 리 적 으로 사용 하여 웹 페이지 를 더욱 자 유 롭 게 합 니 다!
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript Ajax에 대한 간단한 연습저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
