ajaxアップロードファイルアップロードの進捗状況の傍受
2807 ワード
ajaxアップロード、リスニング表示アップ進捗、フロントエンドコードは以下の通り
<script type="text/javascript" src="js/jquery-3.2.1.min.js"/>
:<span id="uploadProgress">0</span>%
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="file"/>
</form>
<button id="uploadButton"> </button>
<script>
$("#uploadButton").click(function(){
var formData = new FormData($("#uploadForm")[0]);
$.ajax({
type:"post",
url:"http://localhost/third/open/data/file/upload",
async:true,
data:formData,
cache:false,
processData: false,
contentType: false,
xhr: function xhr() {
// xhr
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
// progress
xhr.upload.addEventListener('progress', function (e) {
//e.loaded
//e.total
var percentage = parseInt(e.loaded / e.total * 100)
$("#uploadProgress").html(percentage)
}, false);
}
return xhr;
},
success:function(res){
alert(JSON.stringify(res))
}
});
});
</script>
</code></pre>
<p><strong> ：</strong>e.loaded ，e.total ， ， ， </p>
<p> </p>
<p> ， ， ， ：https://blog.csdn.net/wsjzzcbq/article/details/87916696</p>
<p> </p>
<p> </p>
<p><a href="https://img.md5.com/image/info8/b19904bc2f6c41da801c965e6b8eded2.gif" target="_blank"><img alt="ajax _ 1 " height="895" src="https://s1.md5.ltd/image/237e4de6cbbd78f1583cd3e7979e036b.gif" width="1316" style="border:1px solid black;" class="check_url_is_full"/></a></p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div>
</div>