当前位置：首页 > article >正文

图片预览图片上传到服务器

article 2024/11/28 17:56:18

首先要明白理解 multipart/form-data：‌multipart/form-data是一种在HTTP请求中使用的MIME类型，主要用于在客户端和服务器之间传输包含文件或二进制数据的表单数据。它通过一个边界（boundary）来分隔不同的表单字段和文件数据‌。

简单来说multipart/form-data类型用于form表单中确保文件内容完整传输

使用场景

multipart/form-data主要用于以下场景：

‌文件上传‌：当表单中包含文件上传字段时，必须使用multipart/form-data编码方式，因为它可以将文件以二进制形式传输‌。
‌二进制数据传输‌：除了文件，还可以传输其他二进制数据，如图片、音频等。

实际应用

在HTML表单中，enctype属性用于指定表单数据的编码方式。默认情况下，enctype的值为application/x-www-form-urlencoded，适用于文本数据的传输。但当需要上传文件时，必须将enctype设置为multipart/form-data，以确保文件内容能够完整传输‌

案例如下

<div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">景点图片：</label>
                    <div class="col-sm-10 d-flex">

                        <div style="display: flex;">
                            <input type="file" name="cover" id="inputFile">
                            <button type="button" class="btn btn-sm" id="sureUp">上传图片</button>
                        </div>
                        <img src="" id="yl" alt="">
                    </div>
                </div>

上传之后先预览在确定是否上传到服务器

‌new FileReader()‌ 是JavaScript中的一个内置对象，用于在客户端（浏览器）中异步读取文件内容。它提供了一种将文件内容读取到内存中以供处理的方式，适用于读取不同类型的文件，如文本文件、图像文件等。

var reader = new FileReader(); // 创建新的FileReader实例

reader.onload = function(){

获取文件内容函数

}

reader.readAsText(file); // 以文本格式读取文件内容

reader.readAsDataURL() //以base64 读取图片

  var file = '';//用于存需要上传的图片
            $('#inputFile').change(function () {

                if (this.files && this.files[0]) {
                    file = this.files[0]
                    var reader = new FileReader();

                    reader.onload = function (e) {

                        $('#yl').attr('src', e.target.result);
                    };

                    reader.readAsDataURL(this.files[0]); // 读取文件内容
                }

            })

            $('#sureUp').click(function () {
                var formData = new FormData();
                formData.append('file', file);
                // file (后台接收的参数)
                $.ajax({
                    url: 'http://127.0.0.1:8088/api/upload', // 你的图片上传接口
                    type: 'POST',
                    data: formData,
                    contentType: false, // 不设置内容类型
                    processData: false, // 不处理发送的数据
                    success: function (response) {
                            console.log(res)
                    }

                })
            })

查看全文

http://www.kler.cn/a/413081.html