這次帶給大家ajax+html實作檔案上傳有哪幾種方法,ajax+html實作檔案的注意事項有哪些,以下就是實戰案例,一起來看一下。
引言:大家都知道,html中上傳檔案就一個input,type=file就搞定了。但是,這個標籤的樣式,實在不值得提點什麼,要改動他的樣式,恐怕也是較難的。但其實蠻簡單,今天就來談談上傳檔案小技巧吧!
1. 怎麼自訂樣式?
1)、只管依照自己喜歡看到的樣式去定義即可,如< /a>,可以是背景圖片效果,可以是文字指示,總之想怎麼改怎麼改!有了按鈕,還需要一個檔案名稱容器,用來存放選擇上傳檔案時的名字,從而不讓上傳看起來很無聊。
2)、添加真正需要上傳的文件控件,並設定屬性display:none;如, 這樣就有了真正的上傳文件的地方了。所以,可以說,上傳檔案的介面有多漂亮取決你的想像力!
2. 怎麼觸發事件?
這是重點,觸發的點應該是自己寫的樣式處,而真正起作用的元素卻是隱藏的,但是並不影響它的點擊效果,只需要給它觸發一個點選事件即可,如$('#target-file').trigger('click');
3. 多重選取檔案?
多檔案上傳,只需使用html的一個file的multiple=true即可,當然你也可以選擇第三方的上傳控件,如swfupload,效果是真心不錯的,但是對於不想用的插件的人,就不起作用了。
#4. 相關外掛程式?
介面美化其實可以使用jqueryui等外掛;
要做一些友善的互動的話,都會用到ajax技術,無刷新切換、非同步上傳、提交,最後,其實ajax的路徑也是可以保留的,使用pushState, replaceState 實作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>
以上,主要就是,使用隱藏的input file標籤選擇,選擇檔案之後立即ajax提交,最後,整個表單ajax提交的過程。
合理地使用一些css, js, 讓你的網頁更自由!
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是ajax+html實作檔案上傳有哪幾種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!