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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

webpack.config.js 매개변수 사용 튜토리얼

프로젝트에서 p5.js 키보드 상호 작용을 사용하는 방법

위 내용은 jquery를 사용하여 파일을 업로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!