zoukankan      html  css  js  c++  java
  • AJAX上传文件

     function up_files() {
            var fileSelect = document.getElementById('file-select');
            var files = fileSelect.files;
    
            var formData = new FormData();
    
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
    
                if (!file.type.match('image.*')) {
                    continue;
                }
    
                formData.append('photos[]', file, file.name);
            }
    
            var xhr = new XMLHttpRequest();
    
            xhr.open('POST', 'test.php', true);
    
            xhr.onload = function () {
                if (xhr.status !== 200) {
                    alert('An error occurred!');
                }
            };
    
            var progressBar = document.getElementById('progress');
            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    progressBar.value = (e.loaded / e.total) * 100;
                    progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
                }
            };
    
            xhr.send(formData);
        }
    <div id="progress" style=" 100px;height: 100px;background-color: #0baae4">Test content</div>
    <input type="file" id="file-select" name="photos[]" multiple/>
    <button onclick="up_files()">上传</button>

    test.php 中使用$_FILES 来获取文件信息

    原文链接:http://javascript.ruanyifeng.com/bom/ajax.html#toc21

  • 相关阅读:
    构造函数和析构函数
    关联[2]
    关联模型[1]
    auth 权限控制
    多语言设置
    文件上传
    验证码
    图像处理
    Session 与 Cookie
    控制器[3]
  • 原文地址:https://www.cnblogs.com/neverleave/p/6117534.html
Copyright © 2011-2022 走看看