轉(zhuǎn)自：https://blog.csdn.net/AK852369/article/details/102778622
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>上傳文件</title>
</head>
<body>
? <input type="file" id="upload" />
? <!-- accept="image/*" -->
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
? ? $("#upload").change(function (link) {
? ? ? ? var file = link.target.files[0];
? ? ? ? var formData = new FormData();
? ? ? ? formData.append("file", file);
? ? ? ? formData.append("key", "Gn15XGagWO");
? ? ? ? $.ajax({
? ? ? ? ? ? url: "upload",
? ? ? ? ? ? type: "post",
? ? ? ? ? ? data: formData,
? ? ? ? ? ? dataType: 'json',
? ? ? ? ? ? contentType: false,
? ? ? ? ? ? processData: false,
xhr: function () {
? ? ? ? ? ? ? ? var xhr = $.ajaxSettings.xhr();
? ? ? ? ? ? ? ? if (onprogress && xhr.upload) {
? ? ? ? ? ? ? ? ? ? xhr.upload.addEventListener("progress", onprogress, false);
? ? ? ? ? ? ? ? ? ? return xhr;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? success: function (res) {
? ? ? ? ? ? }
? ? ? ? })
? ? })
? function onprogress(evt) {
? ? ? ? console.log(evt)
? ? ? ? var loaded = evt.loaded;? ? //已經(jīng)上傳大小情況
? ? ? ? var tot = evt.total;? ? ? //附件總大小
? ? ? ? var per = Math.floor(100 * loaded / tot);? //已經(jīng)上傳的百分比
? ? ? ? console.log(loaded)
? ? ? ? console.log(tot)
? ? ? ? console.log(per)
? }
</script>
</html>
