js原生上传图片 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<!-- 上传单个图片 -->
<input type="file" id="upload">

<!-- 上传多个图片 -->
<input type="file" multiple id="uploadMultiple">


<script src="home/js/jquery-3.2.1.min-1.js"></script>
<script>
    document.getElementById('upload').addEventListener('change', function (event) {
        var $file = event.currentTarget;

        var formData = new FormData();

        var file = $file.files;

        formData = new FormData();

        formData.append(file[0].name, file[0]);

        $.ajax({
            url: '/upload',
            type: 'POST',
            dataType: 'json',
            data: formData,
            contentType: false,
            processData: false
        })
            .done(data => {
                console.log(data)
                $('#box').append(`<div class="photo-item"><img class="item-image" width="100%" height="100%" src="${data.url}"/></div>`);
            })
            .fail(data => {
                console.log(data)
            })
    });

    document.getElementById('uploadMultiple').addEventListener('change', function (event) {
        var $file = event.currentTarget;

        var formData = new FormData();

        var file = $file.files;

        for (var i = 0; i < file.length; i++) {
            formData = new FormData();
            formData.append(file[i].name, file[i]);
            $.ajax({
                url: '/upload',
                type: 'POST',
                dataType: 'json',
                data: formData,
                contentType: false,
                processData: false
            })
                .done(data => {
                    console.log(data)
                    $('#box').append(`<div class="photo-item"><img class="item-image" width="100%" height="100%" src="${data.url}"/></div>`);
                })
                .fail(data => {
                    console.log(data);
                });
        }
    });
</script>

</body>
</html>
posted @ 2021-07-15 14:40  蠡li  阅读(184)  评论(0)  编辑  收藏  举报