이번에는 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 제출 과정. CSS와 JS를 합리적으로 사용하여 웹페이지를 더 자유롭게 만드세요! 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 자료:
양식을 제출하고 ajax로 파일 업로드를 구현하는 방법
Ajax가 json 형식 데이터를 백그라운드로 전송할 때 오류를 처리하는 방법
위 내용은 ajax+html로 파일 업로드를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!