javascript – Bezüglich des Problems, dass Ajax mehrere Bilder hochlädt.
我想大声告诉你
我想大声告诉你 2017-06-26 10:55:20
0
5
721

Ich weiß nicht, wie Ajax mehrere Bilder hochlädt und sie in den Hintergrund sendet.

Für ein einzelnes Bild können Sie Base64 verwenden, um es an das Backend zu senden. Wenn jedoch mehrere Bilder vorhanden sind, ist diese Methode nicht geeignet, da Base64 sehr groß ist.

Wie wird es an das Backend gesendet? Wenn der Hintergrund PHP ist, wie wird es empfangen?

Laut Kommentarmethode habe ich offensichtlich 2 Bilder zum Hochladen ausgewählt. Warum wird im Hintergrund nur 1 Datei angezeigt?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>


<form id="form">
    <input type="file" multiple="" name="file">
    <button id="btn" type="button">上传</button>
</form>


<script>
document.getElementById('btn').onclick = () => {
    $.ajax({
        url: './test.php',
        type: 'POST',
        dataType: 'text',
        data: new FormData(document.getElementById('form')),
        processData: false,
        contentType: false,
    })
    .done(function(data) {
        console.log(data);
    })
}
</script>


    
</body>
</html>

我想大声告诉你
我想大声告诉你

Antworte allen(5)
三叔

还是用表单吧,你选择直接ajax的原因应该是不想刷新页面,
这样的话可以使用formdata进行ajax提交,这是一个H5的新属性,具体的可以看看实例,它最主要的功能就是将表单域里的内容封装成formdata,然后用ajax提交出去,表单控件的name对应后台的参数name,至于多个图片就用一组相同name的input就可以了。下面是js和效果图,还要不懂的话可以追问。

phpcn_u1582

http://www.jianshu.com/p/756e...
多图就是多append进FormData而已

伊谢尔伦

使用FormData提交就可以了

funUploadFile: function(form, files) {
                    var that = this;
                    var formData = new FormData(form[0]);
                    for (var i = 0; i < files.length; i++) {
                        formData.append('file[' + i + ']', files[i]);
                    }
                    var xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function() {
                            if (xhr.readyState == 4 && xhr.status == 200) {
                                var data = JSON.parse(xhr.responseText);
                                //提交返回
                            }
                        }
                    //侦查当前附件上传情况  
                    xhr.upload.onprogress = function(evt) {
                        var loaded = evt.loaded;
                        var tot = evt.total;
                        var per = Math.floor(100 * loaded / tot); //已经上传的百分比  
                        // console.log(per);
                    }
                    xhr.open("post", 上传地址);
                    xhr.send(formData);
                }
曾经蜡笔没有小新
function httpUpload(url, formData) {
    //formData.append("_token", window._token);
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function (response) {
                resolve(response);
            },
            error: function (response) {
                reject(response);
            }
        });
    });
}

https://developer.mozilla.org...
主要就是将要上传的文件往formData里面append
后端该怎么取就怎么取(php: $_FILES里面)

刘奇

貌似题主的初衷是一起传太大了? 可以一个一个传,失败了也能重试,实现成本低。

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage