Summary of file upload skills based on ajax html

This article mainly summarizes the file uploading techniques based on ajax html in detail, which has certain reference value. Interested friends can refer to it

Quotation: As we all know, in html Uploading files requires only one input, type=file and it’s done. However, the style of this label is really not worth mentioning. It is probably difficult to change its style. But it’s actually quite simple. Let’s talk about some tips for uploading files today!

1. How to customize the style?
1) Just define it according to the style you like to see, such as abc3a7c0b41fd564e3345b8481f574fb5db79b134e9f6b82c0b36e0489ee08ed, it can be The background image effect can be a text instruction. In short, you can change it however you want! With the button, a file name container is also needed to store the name when selecting the file to upload, so as to prevent the upload from looking boring and difficult to understand.

2), add the file control that really needs to be uploaded, and set the attribute display:none; such as 4d2ffc44994b3a0ff1e24e31262c1a07, so that there is a real uploaded file place. So, it can be said that how beautiful the interface for uploading files is depends on your imagination!

2. How to trigger an event?

This is an important point. The triggering point should be the style you write. The element that actually works is hidden, but it does not affect its click effect. You only need to trigger a Just click on the event, such as $('#target-file').trigger('click');

3. Select multiple files?

To upload multiple files, just use multiple=true of a file in HTML. Of course, you can also choose a third-party upload control, such as swfupload. The effect is really good, but for those who don’t want to If you use the plug-in, it won't work.                                                                                      

Interface beautification can actually use plug-ins such as jqueryui; If you want to do some friendly interactions, ajax technology will be used, no refresh switching, asynchronous upload, submission, and finally, in fact, the path of ajax It can also be retained. Use pushState and replaceState to implement pjax.

Form verification: validform.js

Asynchronous file submission: jquery.form.js
Friendly pop-up prompt: layer.js


5. Any compatibility issues?

When doing interface work, the most feared and important thing is the compatibility issue between various browsers. The following are the main points for reference:

table The processing method of width is inconsistent;

select, input display height is inconsistent;

alert pop-up window is inconsistent;

...

6. Demo code

<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=&#39;true&#39; />
<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 = &#39;系统提示：&#39;;
  var submitId = &#39;#do-submit&#39;;
  $(&#39;#taskForm&#39;).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){
    $(&#39;.upload-file-real&#39;).attr(&#39;disabled&#39;, &#39;disabled&#39;);
    $(submitId).attr(&#39;disabled&#39;, &#39;disabled&#39;); //提交前禁用按钮
    ajaxSubmitForm(curform);
    $(submitId).removeAttr(&#39;disabled&#39;);   //失败后恢复可提交
    return false;
   },
   submitForm: function(){}      //不再起作用
  });

  //切换上传方法
  $(&#39;.switch-upload-method&#39;).off().on(&#39;click&#39;, function(){
//   $(submitId).attr(&#39;disabled&#39;, &#39;disabled&#39;);
   var pObj = $(this).parent().find(&#39;.switch-upload-method&#39;);
   var index = pObj.index(this);
   var uploadTypeId = $(&#39;#upload-type-id&#39;).val();      //上传方式：1:打包工具;2:本地上传,0:没有上传方式
   var uploadType = $(this).attr(&#39;up-type-id&#39;);
   if(parseInt($(&#39;#sub-channel-count&#39;).html()) > 0){
    if(uploadTypeId != uploadType){
     layer.alert(&#39;还有子渠道包数据，不能完成切换，请先确认清除再切换！&#39;);
     return false;
    }
   }
   pObj.not(&#39;:eq(&#39; + index + &#39;)&#39;).removeClass(&#39;btn-danger&#39;).addClass(&#39;btn-default&#39;);
   pObj.eq(index).removeClass(&#39;btn-default&#39;).addClass(&#39;btn-danger&#39;);
   if(uploadType == 36){    //local-upload
    $(&#39;#upload-type-id&#39;).val(uploadType);
    $(&#39;#init-apk-container&#39;).show();
    $(&#39;#apk-tool-container&#39;).hide();
    $(&#39;#upload-main-control&#39;).find(&#39;.del-it-main&#39;).css({display: &#39;inline-block&#39;});
    $(&#39;#local-upload-real-file&#39;).trigger(&#39;click&#39;);
   }else if(uploadType == 35){   //apk-tool
    $(&#39;#upload-type-id&#39;).val(uploadType);
    $(&#39;#init-apk-container&#39;).hide();
    $(&#39;#local-upload-container&#39;).hide();
    $(&#39;#upload-main-control&#39;).find(&#39;.del-it-main&#39;).hide();
    $(&#39;#apk-tool-container&#39;).show();
   }
  });
  //本地上传
  $(&#39;#local-upload-real-file&#39;).off().on(&#39;change&#39;, 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(&#39;response-id&#39;);
   var responseObj = $(&#39;#&#39; + responseObjId);
   $(&#39;#taskForm&#39;).ajaxSubmit({
    url:&#39;/aa/bb/uploadTmpApk&#39;,
    resetForm: false,
    dataType: &#39;json&#39;,
    beforeSubmit: function(option){
     window.loading = layer.load(2);
    },
    success: function(data, statusText){
     layer.close(window.loading);
     if(data.status == 1){
      $(&#39;#version-identifier&#39;).val(data.version);
      responseObj.html(data.apkInfoHtml);
      responseObj.show();
      var delObj = $(&#39;#upload-main-control&#39;).find(&#39;.del-it-main&#39;);
      delObj.css({&#39;display&#39;: &#39;inline-block&#39;});
      $(&#39;#sub-channel-count&#39;).html(data.apkTotal);
      $(&#39;#init-apk-container&#39;).hide();
      $(submitId).removeAttr(&#39;disabled&#39;);
     }else{
      layer.alert(data.info, {title: alertTitle});
     }
    },
    error: function(data){
     layer.close(window.loading);
     layer.alert(&#39;未知错误，请稍后再试！&#39;);
    }
   });
   return false;//防止dialog 自动关闭
  });
  //打包工具
  $(&#39;#apk-tool-real-file&#39;).off().on(&#39;change&#39;, function(){
   if(!$(this).val()){
    return false;
   }
   var responseObjId = $(this).attr(&#39;response-id&#39;);
   var responseObj = $(&#39;#&#39; + responseObjId);
   $(&#39;#Form&#39;).ajaxSubmit({
    url:&#39;/aa/bb/uploadTmpApkTool&#39;,
    resetForm: false,
    dataType: &#39;json&#39;,
    beforeSubmit: function(option){
     window.loading = layer.load(2);
    },
    success: function(data, statusText){
     layer.close(window.loading);
     if(data.status == 1){
      $(&#39;#version-identifier&#39;).val(data.version);
      responseObj.html(data.infoHtml);
      var parentContainer = responseObj.parent().parent(),
       nameContainer = parentContainer.find(&#39;.apk-name-container&#39;),
        delObj = parentContainer.find(&#39;.del-it-apk-tool&#39;);
      nameContainer.html(data.apkName);
      nameContainer.attr(&#39;title&#39;, data.apkName);
      $(&#39;#apk-tool-file-tmp&#39;).html(data.fileInfo);
      $(submitId).removeAttr(&#39;disabled&#39;);
     }else{
      layer.alert(data.info, {title: alertTitle});
     }
    },
    error: function(data){
     layer.close(window.loading);
     layer.alert(&#39;未知错误，请稍后再试！&#39;);
    }
   });
   return false;//防止dialog 自动关闭
  });
  $(&#39;.apk-tool-upload-button&#39;).on(&#39;click&#39;, function(){
   $(&#39;#apk-tool-real-file&#39;).trigger(&#39;click&#39;);
  });
 });
</script>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

A simple example of using XPath in dom4j

A brief discussion on Bootstrap's DatePicker date range selection

A simple example of using AJAX to implement page login and registered user name verification

The above is the detailed content of Summary of file upload skills based on ajax html. For more information, please follow other related articles on the PHP Chinese website!