用户上传图片

最新推荐文章于 2024-05-28 22:57:36 发布

脱缰的哈士奇

最新推荐文章于 2024-05-28 22:57:36 发布

阅读量753

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_39658827/article/details/84110494

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.修改上传文件默认样式(原来的太丑啦）

方法：将原有的< input type='file'> 隐藏，然后增加一个监听事件，当替换的按钮点击时让真正的file也产生点击动作。

    <style>
        input {     //隐藏默认样式
            position: absolute;
            width:0;
            height:0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <button id="up">
        点我上传文件
        <input type="file" id="file">
    </button>
    <script>  //点击后触发真正的上传文件按钮
        document.getElementById('ip').onclick=function () {  
            document.getElementById('file').click();
        }
    </script>

2.判断上传文件类型，限制上传文件属性。

原生input file控件有个files属性，该属性是一个数组。数组第一个元素有以下属性：lastModifiedDate，name，size，type，webkitRelativePath等

var fileData=$('file').files[0];//获取所有信息
var size=fileData.size //这里是字节数，转换为M需要除以1021*1024
var type=fileData.type; //获取上传文件类型

3.在线预览图片

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。

$('#file').change(function(){

if (!file.files || !file.files[0]) {
    return false;     //判断文件为空
}

else {

var reader = new FileReader();   //初始化文件读取构造函数
   reader.readAsDataURL(file.files[0]);    //采用用dataurl（base64）形式读取图片文件
   reader.onload = function(event) {           //加载成功后
       var src = event.target.result;  //或者var Src = this.result;
       $('#preview').attr('src',src)
   }
}

}

})

4.插件cropper

用户上传图片时需要对图片位置，大小，旋转角度等进行调整，cropper以实现在前端对图片处理，然后传到服务器进行存储。

<script src="js/jquery.js"></script>
<script src="js/cropper.js"></script> //引入cropper和jquery

$(function(){
    $("#image").cropper({
        aspectRatio: 1 / 1, //显示裁剪比例
        preview: '.preview', //这里预览如果没有效果，需要加上一段css（overflow: hidden）
        viewMode: 1, 
    })
});

用官方的推荐的创建办法可能会报错，解决办法，换版本或者引用cdn。

html 部分：

<div class="box">   //改变图片显示大小记得改box父盒子
    <img id="image" src="" style="max-width: 300px">
</div>
<div class="preview"></div>  //对裁剪后的图片进行预览

踩坑：直接修改cropper的图片来源(src)会导致没有插件效果。

var replaceSrc = event.target.result;
// 更换cropper的图片po
$('#image').cropper('replace', replaceSrc, false);// 默认false，适应高度，不失真

这个地方花了我很久时间......

写的很乱，很多东西都没提到，别见怪。

明天看怎么把图片传给服务器

脱缰的哈士奇

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用户上传图片

1.修改上传文件默认样式(原来的太丑啦）方法：将原有的&lt; input type='file'&gt; 隐藏，然后增加一个监听事件，当替换的按钮点击时让真正的file也产生点击动作。 &lt;style&gt; input { //隐藏默认样式 position: absolute; width:0; ...
复制链接

扫一扫

专栏目录