Summary of techniques for implementing file upload in ajax html

This article mainly summarizes the file uploading techniques based on ajax html in detail. It has a certain value for reference and learning ajax, and I have some feelings about ajax Interested friends can refer to the quote

: As we all know, uploading files in HTML requires only one input, type=file. 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, but the element that really works is hidden, but it does not affect its click effect. You only need to give It just triggers a click event, such as $('#target-file').trigger('click');

3. Multiple-select 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 people who don’t want to 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 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:

The table width is handled inconsistently;

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 mainly about using the hidden input file tag selection, ajax submission immediately after selecting the file, and finally, the entire form ajax submission process. Use some css and js reasonably to make your web page more free!

Related recommendations:

HTML5-based previewable multi-image Ajax upload

PHP similar Simple example of AJAx uploading pictures

Parammeter submission does not update during ajax upload and other related issues

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