上传图片功能的实现

最新推荐文章于 2024-05-18 21:57:13 发布

h960822

最新推荐文章于 2024-05-18 21:57:13 发布

阅读量153

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/h960822/article/details/136596919

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>上传图片文件并回显</title>
</head>

<body>
　　 <input type="file" id="#file" multiple>
    <div class="show-box"></div>
    <script>
        var input = document.getElementsByTagName('input')[0],
            showBox = document.getElementsByClassName('show-box')[0];

        input.onchange = function () {
　　　　　　　var len = this.files.length; // 对于input上传的图片，使用dom.files可以获取图片信息
            for(let i = 0; i < len; i++) {
                let fileImg = new FileReader();
                fileImg.readAsDataURL(this.files[i]); // readAsDataURL方法将图片转为base64格式存储于result中
                fileImg.onload = function() {
                    let oImg = new Image();
                    oImg.src = this.result; // 使用FileReader的result属性获取图片base64信息
                    showBox.appendChild(oImg);
                }
　　　　　　　　　　fileImg.onerror = function(e) {
　　　　　　　　　　　　console.log('error' + e);
　　　　　　　　　　}
            }
        }
    </script>
</body>

</html>

FormData结合ajax将图片上传至服务器

// 我们创建一个FormData对象，然后每获取一个文件，就使用append()方法添加字段

var formData = new FormData();

// ...
fileImg.onload = function () {
   // ...
   formData.append(files[i].name, files[i]); // 键值对形式 此处append()第二个参数传入的是文件对象File类型
}

// 然后再使用ajax将formData数据传送至服务器

var formData = new FormData($('#uploadForm')[0]); // 注意：使用参数是一个DOM对象，而非jQuery对象；且必须是是form表单元素
// formData.append('num', 1)； // 也可以向已有表单的数据基础上，继续添加新的键值对
$.ajax({
    url: 'file.php',
    type: 'POST',
    data: formData,                    // 上传formdata封装的数据
    dataType: 'JSON',
    cache: false,                      // 不缓存
    processData: false,                // jQuery不要去处理发送的数据
    contentType: false,                // jQuery不要去设置Content-Type请求头
    success:function (data) {           //成功回调
        console.log(data);
    }
});