Ajax HTMLをベースにしたファイルアップロードスキルのまとめ

この記事は主に、ajax html に基づいたファイルのアップロード手法を詳しくまとめたものです。興味のある方は参考にしてください。

引用: ご存知のとおり、html でのファイルのアップロードは単なる入力です。終わり。しかし、このレーベルのスタイルは特筆に値するものではなく、おそらくそのスタイルを変えるのは難しいでしょう。しかし、実際には非常に簡単です。今日はファイルをアップロードするためのヒントについて説明しましょう。

1. スタイルをカスタマイズするには?
1) など、表示したいスタイルに従って定義するだけで、背景画像効果にすることができます, つまり、テキストの指示であれば、自由に変更できます。このボタンでは、アップロードが退屈でわかりにくいものにならないように、アップロードするファイルを選択するときに名前を保存するファイル名コンテナーも必要になります。

2) 本当にアップロードする必要があるファイル コントロールを追加し、 などの属性を設定します。ファイルをアップロードします。したがって、ファイルをアップロードするためのインターフェイスがどれだけ美しいかは、あなたの想像力にかかっていると言えます。

2. イベントをトリガーするにはどうすればよいですか?

これは重要なポイントです。トリガーポイントは作成したスタイルである必要がありますが、実際に機能する要素は非表示になりますが、クリックイベントをトリガーするだけで済みます。 $('#target-file').trigger('click');

3. 複数のファイルを選択しますか?

複数のファイルをアップロードするには、HTML でファイルの multiple=true を使用するだけです。もちろん、swfupload などのサードパーティのアップロード コントロールを選択することもできます。ただし、それを使用しない人向けです。プラグインを使用したいのですが、動作しません。                                                        ​

インターフェイスの美化には、実際には jqueryui などのプラグインを使用できます。 フレンドリーな対話を実行したい場合は、リフレッシュ不要の切り替え、非同期アップロード、送信などの Ajax テクノロジーが使用されます。 Ajax パスは、pushState を使用して保持することもできます。replaceState は pjax を実装します。

フォーム検証: v​​alidform.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=&#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>

上記は、将来皆さんに役立つことを願っています。

関連記事:

dom4jでXPathを使用する簡単な例

BootstrapのDatePicker日付範囲選択に関する簡単な説明

AJAXを使用してページログインと登録ユーザー名の検証を実装する簡単な例

以上がAjax HTMLをベースにしたファイルアップロードスキルのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。