引用: ご存知のとおり、HTML でファイルをアップロードするには、type=file という 1 つの入力のみが必要です。しかし、このレーベルのスタイルは特筆に値するものではなく、おそらくそのスタイルを変えるのは難しいでしょう。しかし、実際には非常に簡単です。今日はファイルをアップロードするためのヒントについて説明しましょう。 1. スタイルをカスタマイズするにはどうすればよいですか?
1. など、表示したいスタイルに従って定義するだけです。背景の画像効果はテキストの指示にすることができます。つまり、それらを自由に変更できます。このボタンでは、アップロードが退屈でわかりにくいものにならないように、アップロードするファイルを選択するときに名前を保存するファイル名コンテナーも必要になります。 2. 本当にアップロードする必要があるファイル コントロールを追加し、ファイルをアップロードする実際の場所が存在するように、属性 display:none を設定します。 。したがって、ファイルをアップロードするためのインターフェイスがどれだけ美しいかは、あなたの想像力にかかっていると言えます。 2. イベントをトリガーするにはどうすればよいですか?
これは重要な点です。トリガー ポイントは作成したスタイルである必要があります。実際に機能する要素は非表示になりますが、クリック イベントをトリガーするだけで済みます。はい、$('#target-file').trigger('click'); のようになります。 3. ファイルを複数選択しますか?
複数のファイルをアップロードするには、HTML でファイルの multiple=true を使用するだけです。もちろん、swfupload などのサードパーティのアップロード コントロールを選択することもできます。ただし、プラグイン用です。人を使いたくない場合はうまくいきません。 ？
インターフェースを美しくするには、実際に jqueryui などのプラグインを使用できます。
フレンドリーな対話を実行したい場合は、リフレッシュ不要の切り替えなどの Ajax テクノロジーが使用されます。非同期アップロード、送信、そして実際には、ajax のパスも保持できます。pjax を実装するには、pushState と replaceState を使用します。
フォーム検証: validform.js
非同期ファイル送信: jquery.form.js
フレンドリーなポップアップ プロンプト ：layer.js
5. 互換性の問題はありますか?
インターフェイスの作業を行うときに最も懸念され、重要なことは、さまざまなブラウザ間の互換性の問題です。主な参考点は次のとおりです。
メソッドが一貫していません。 >
選択、入力表示の高さが一貫していません。アラート ポップアップ ウィンドウが一貫していません。
6. デモ コード?
上記は主に、隠し入力ファイルタグを使用して選択すること、ファイルを選択した直後の ajax 送信、そして最後にフォーム全体の ajax 送信のプロセスについて説明します。
<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>CSS と JS を合理的に使用して、Web ページをより自由に作成してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
