上传文件

写在前面的话：

　　判断是否符合大小，上传文件。最初是使用插件webuploader来做的，但是因为其初始化的关系，点击区域始终为1px*1px，refresh之后也不能解决我的问题，所以，试了下下边的方法：

FormData()：相关资料

 

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
</head>

<body>
<style>
    .imgs {
        margin: 60px auto;
        border: 1px solid red;
    }
</style>
    <div class="box">
      <label for="files" class="btn btn-info">选择文件</label>
      <!-- label的for属性与input:file的id属性关联起来时, 当label被点击的时候, input对象也会获取焦点, 弹出文件选择窗口 -->
      <input type="file" name="name" id="files" style="display: none">
        <div class="imgs"> </div>
        <!-- 存放预览图片 -->
    </div>
    <script>
    $('#files').change(function() { // 这里绑定的是input:file 对象的change事件 是你的实际情况绑定对应的事件
        var a = new FormData(); // 向后台发送文件 使用 FormData 对象 包裹文件
        a.append('Cander', this.files[0]) 
　　　　 // 这里的this是 input:file 对象 它的files属性就是用户选择的文件 它是一个数组, 可以选择多个文件
        // 这里我们只选择一个 就取数组中的第一个文件
        console.log(this.files[0])

        // 在向后台上传之前可先判断一下图片的大小，如果符合条件就上传：
        var max_size = 100000002;
        var max_width = 1000;
        var max_height = 800;

        // 先判断大小
        if (this.files[0].size <= max_size) {
            var image = new Image();
            image.src = getObjectURL(this.files[0]);
            image.onload = function() {
                console.log(image.width)
                console.log(image.height)
                if (image.width <= max_width && image.height <= max_height) {
                    // 上传至后台
                    $.ajax({
                        type: 'POST',
                        processData: false, // 发送文件时这两个选项要关闭
                        contentType: false, // 发送文件时这两个选项要关闭
                        url: 'your url',
                        data: a, 　　　　　　// 这里向服务器发送的对象就是承载了文件的form对象
                        success: function(s) {
                            console.log(s)
                            if (s.code === 0) {
                                var b = $('.imgs').html()
                                $('.imgs').html(b + '<img src="' + s.url + '">')
                            }
                        },
                        error: function(f) { console.log(f) }
                    })
                }
            }
        }else{
          
        }
    });

    // 获取图片路径函数
    function getObjectURL(file) {
        var url = null;
        if (window.createObjcectURL != undefined) {
            url = window.createOjcectURL(file);
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    </script>
</body>

</html>

console.log(this.files[0]) 的结果：

 

注： 文中 ‘获取图片路径函数’来自于  https://segmentfault.com/q/1010000011739866?sort=created

 

posted @ 2017-11-06 17:41  Chrisreen  阅读(176)  评论(0)  编辑  收藏  举报