ホームページ > 記事 > ウェブフロントエンド > Ajax HTMLでファイルアップロードを実装するテクニックのまとめ
Ajax HTMLでファイルアップロードを実装するテクニックのまとめ
- 韦小宝オリジナル
- 2017-12-30 20:14:291717ブラウズ
この記事は主に ajax html に基づくファイルアップロードテクニックをまとめたもので、ajax に興味のある友人は参考にしてください。 、HTML でファイルをアップロードするには、type=file という 1 つの入力のみが必要です。しかし、このレーベルのスタイルは特筆に値するものではなく、おそらくそのスタイルを変えるのは難しいでしょう。しかし、実際には非常に簡単です。今日はファイルをアップロードするためのヒントについて説明しましょう。
1. スタイルをカスタマイズするにはどうすればよいですか?
2) 本当にアップロードする必要があるファイル コントロールを追加し、4d2ffc44994b3a0ff1e24e31262c1a07 などの属性を設定します。ファイルをアップロードします。したがって、ファイルをアップロードするためのインターフェイスがどれだけ美しいかは、あなたの想像力にかかっていると言えます。
2. イベントをトリガーするにはどうすればよいですか?
これは重要なポイントです。トリガーポイントは作成したスタイルである必要がありますが、実際に機能する要素は隠されていますが、クリックイベントをトリガーするだけで済みます。 as $('#target-file').trigger('click');
3. 複数のファイルを選択しますか?
複数のファイルをアップロードするには、HTML でファイルの multiple=true を使用するだけです。もちろん、swfupload などのサードパーティのアップロード コントロールを選択することもできます。ただし、それを使用しない人向けです。プラグインを使用したくない場合は、機能しません。関連するプラグイン?
インターフェイスの美化には、実際には jqueryui などのプラグインを使用できます。
フレンドリーな対話を実行したい場合は、リフレッシュ不要の切り替え、非同期アップロード、送信などの Ajax テクノロジーが使用されます。 Ajax パスは、 PushState を使用して保持することもできます。 replaceState は、pjax を実装します。
非同期ファイル送信: jquery.form.jsフレンドリーなポップアップ プロンプト:layer.js
5。問題？
インターフェースの作業を行うときに最も懸念され、重要なことは、さまざまなブラウザ間の互換性の問題です。主な参照点は次のとおりです。
テーブルの幅が一貫して処理されない select 、入力表示の高さが一貫していない。
<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>
隠し入力ファイルタグを使用する選択、ファイルを選択した直後の Ajax 送信、そして最後にフォームの Ajax 送信プロセス全体です。 CSS と JS を合理的に使用して、Web ページをより自由に作成してください。
関連する推奨事項:
HTML5 に基づいたプレビュー可能な複数画像の Ajax アップロード
PHP と同様の AJAx アップロード画像の簡単な例
Ajax アップロード パラメータの送信が更新されない、およびその他の関連問題
以上がAjax HTMLでファイルアップロードを実装するテクニックのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。