jq 文件上传

input注册事件来自：https://blog.csdn.net/qq_30100043/article/details/76408184

上传 来自：https://blog.csdn.net/ld767416042/article/details/80135331

1.html

<form id="form1" enctype="multipart/form-data" onchange="filechange">
    <input type="file" name="upfile" id="upfile" value="" />
</form>

2.js

2.1.这个事件会在弹出框关闭时触发

document.getElementById('upfile').addEventListener('change', function(data) {
    console.log('来了')
    console.log(data)
})

2.2.js整体是这样的

document.getElementById('imageFile').addEventListener('change', function(data) {
        var formData = new FormData();
        formData.append('file', document.getElementById('imageFile').files[0]);
        formData.append('type', 'goods'); // 需要什么参数这样加
        $.ajax({
            type: 'POST',
            url: '<?=Url::to(['common/upload-image-web'])?>',
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
                console.log(data)
            },
            error: function(err) {
                console.log(data)
            }
        })
    })

/**多图**/
1.首先要在form加multiple
2.上面的js稍作修改
    document.getElementById('imageFile').addEventListener('change', function (data) {
        var formData = new FormData();
        let files = document.getElementById('imageFile').files;
        let len = document.getElementById('imageFile').files.length;

        for (let i = 0; i < len; i++) {
            formData.append('file', files[i]);
            formData.append('type', 'goods');
            $.ajax({
                type: 'POST',
                url: '<?=Url::to(['common/upload-image-web'])?>',
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    console.log(data)
                },
                error: function (err) {
                    console.log(data)
                }
            })
        }
    });