jqueryを使用してファイルをアップロードする方法

今回は、jqueryを使用してファイルをアップロードおよびロードする方法を紹介します。 jqueryを使用してファイルをアップロードおよびロードする際の注意点は何ですか? 以下は実際的なケースです。

ファイルをドラッグしてアップロードします。主に HTML5 の ondrop イベントを使用します。 アップロード コンテンツ チャネル FormData 送信:

//进度条
<p>
 </p><p>0%</p>
 <p></p>

//要拖动到的地方
<p></p>

js:

var dz = $('#main_content_center');
dz.ondragover = function(ev) {
 //阻止浏览器默认打开文件的操作
 ev.preventDefault();
}
dz.ondrop = function(ev) {
 ev.preventDefault();
 var files = ev.dataTransfer.files;
 var len = files.length,i = 0;
 while (i =100){
 $(".parent-dlg").hide();
 }
 }

プログレスバー css:

.parent-dlg{position: absolute;width:400px; height:20px; border:1px solid #aaaaaa;border-radius:3px;top:30%;left:50%;z-index:9999;margin-left:-200px;display:none;}
.parent-dlg .progress-label{position: absolute;left: 50%;top: 4px;font-weight: bold;text-shadow: 1px 1px 0 #fff;} 
.parent-dlg .son {width:0; height:100%; background-color:#cccccc; text-align:center; line-height:20px; font-size:16px; font-weight:bold;}

ファイルアップロードの技術的な方向性独自のプロジェクトに応じて改善できます。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

webpack.config.js パラメーターの使用方法のチュートリアル

プロジェクトで p5.js キーボード インタラクションを使用する方法

以上がjqueryを使用してファイルをアップロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。