js input type=file 选择图片预览并压缩图片

最新推荐文章于 2023-08-18 16:04:10 发布
最新推荐文章于 2023-08-18 16:04:10 发布
阅读量443 收藏 1
点赞数
文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38394249/article/details/106274666
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>压缩图片</title>
        <script type="text/javascript" src="js/jquery-1.12.1.min.js" ></script>
    </head>
    <body>
        <div id="">
            <label>请选择图片：</label>
            <input type="file" name="" id="myfile" value="" />
            <button type="button" οnclick="YaSuo()">确定</button>
        </div>
        <div id="">
            <img id="showImg" src="" width="200px;">
        </div>
        <div id="">
            <img id="showImg2" src="" >
        </div>
        <script>
            function uploadFun(obj){
                var file = $(obj).filters[0];
                    $("#showImg").attr("src",file);
            }
        
            $(function(){
                $("#myfile").change(function(){
                    var file = $(this).get(0).files[0];
                     //创建用来读取此文件的对象
                    
                     var reader = new FileReader();
                
                    //使用该对象读取file文件
                
                      reader.readAsDataURL(file);
                
                    //读取文件成功后执行的方法函数
                
                      reader.οnlοad=function(e){
                
                    //读取成功后返回的一个参数e，整个的一个进度事件
                
                        console.log(e);
                
                    //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
                
                    //的base64编码格式的地址
                
                        $('#showImg').get(0).src = e.target.result;
                
                      }
                    
                })
            });
            
            var quality = 0.6;    // 画质，取值范围0-1
            var maxWidth = 1080;    // 最大像素宽度

            function YaSuo() {
                console.log(11)
                var fileObj = $("#myfile").get(0).files[0];
            
                
                console.log('文件大小：' + fileObj.size);
                
                var reader = new FileReader();
                reader.readAsDataURL(fileObj);
                
                reader.onload = function() {
                    var fileName = $("#myfile").val();
                    var suffix = fileName.substr(fileName.lastIndexOf("."));
                    var img = new Image();
                    img.src = this.result;
                    img.onload = function() {
                        
                        // 按比例缩放
                        var w = this.width < maxWidth ? this.width : maxWidth;
                        var h = this.width < maxWidth ? this.height : this.height / (this.width / maxWidth);
                        
                        var wNode = document.createAttribute('width');
                        var hNode = document.createAttribute('height');
                        
                        wNode.nodeValue = w;
                        hNode.nodeValue = h;
                        
                        var canvas = document.createElement('canvas');
                        
                        canvas.setAttributeNode(wNode);
                        canvas.setAttributeNode(hNode);
                        
                        var ctx = canvas.getContext('2d');
                        ctx.drawImage(this, 0, 0, w, h);
                        
                        var base64Data = canvas.toDataURL('image/jpeg', quality);
                        
                        
                         var bl = convertBase64UrlToBlob(base64Data);
                         var form = new FormData();
                         form.append("file", bl, "file_"+Date.parse(new Date())+suffix); // 文件对象
                        console.log(form)'
                        document.getElementById('showImg2').src = base64Data;
                        
                    }
                }
                
            }
            
            /**
             * 将以base64的图片url数据转换为Blob
             * @param urlData
             *            用url方式表示的base64图片数据
             */
            function convertBase64UrlToBlob(urlData){
                var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while(n--){
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], {type:mime});
            }
        </script>
    </body>
</html>

HTML5 input file 图片上传，压缩，上传，预览
qq_16591861的博客
07-03 3426
上传 预览框 $('#textfile').on('change', function() {         var reader = new FileReader();//新建获取file的读取文件         var imgsrc = null;          var _file = this.files[0],  //获取的的图片             f
js 图片压缩 尺寸不变 压缩质量 input type=file 文件压缩
weixin_42752532的博客
08-11 673
input type=file 文件压缩 js 图片压缩 尺寸不变 压缩质量 <input type=“file” accept=“image/*” name=“files” @change=“imgMsgListDangerImgs”/> imgMsgListDangerImgs(data) { this.imageCompression(data.target.files[0], ‘1’) }, //a 为flag位 可删 data 为input 获取的二进制文件 imageCo
input file图片上传， js 对图片尺寸进行等比例压缩处理
qq_41786458的博客
05-16 3584
//file 上传图片，绑定change事件 <input type="file" onChange="uploadPic(this)" accept="image/*" /> function uploadPic(e) { var file = e.files[0]; function callback(data){//回调获取压缩后的Blog ...
HTML5实现input：file上传压缩，等比压缩图片、base64和文件互相转换
qq_42396791的博客
10-18 7665
本文实例为大家分享了Vue2.0实现调用摄像头进行拍照功能的具体代码，以及图片上传功能引用exif.js，供大家参考，具体内容如下 所需要的插件：https：//download.csdn.net/download/qq_42396791/10728846 插件： 1.jquery.min.js 2.exif.js 效果目标：实现等比例压缩上传 上代码 HTML &lt;!DOC...
input file 上传图片及压缩
weixin_45021098的博客
05-19 1631
VUE3.0大概总结判断浏览器判断ie为某个版本鉴别PC及移动端 判断浏览器 判断浏览器时我们需要用到navigator.userAgent navigator是一个对象，他包含了有关浏览器的信息 userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。 例如：Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322) 完整的代码为var explorer = navigator
js获取 input file 图片立即显示
12-05
"js获取input file 图片立即显示"这个话题就是关于如何利用JavaScript来实现在用户选择图片后即时预览的功能。以下是一个详尽的步骤解释和相关知识点： 1. **HTML 结构**： 首先，我们需要在HTML页面中创建一个`...
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
10-19
总的来说，Vue.js 2.0 移动端拍照压缩图片预览及上传实例涉及的技术点包括Vue组件、事件绑定、文件操作、图片压缩、预览、上传以及可能的原生API调用。在实际开发中，需要根据项目需求选择合适的方法和技术栈，并...
Vue.js 2.0 移动端拍照压缩图片上传预览功能
10-20
这里使用了lrz库（可能是文章中误写为lrz，实际上应该是使用了其他JavaScript库，如file压缩插件等）来压缩图片，并将压缩后的base64字符串存储到imgUrls数组中。 4. 预览图片时使用previewImage方法，在一个隐藏的...
vue实现压缩图片预览并上传功能（promise封装）
10-17
在图片预览并压缩后，我们将Base64格式的图片数据转换为二进制数据，并将其添加到`FormData`对象中。随后，使用`XMLHttpRequest`将`FormData`对象上传到服务器。 4. 浏览器兼容性处理 在上述代码中，还考虑了浏览器...
input file图片压缩踩坑
小菜鸡程序媛的挣扎史
09-29 827
<!--调用canvas方法--> <canvas id="canvas"></canvas> <!--压缩后的图片路劲--> <img src="" class="preview"> <img src="" class="preview"> <!--原图压缩--> <img class="source" ...
前端input file 图片压缩
一只会喊666的咸鱼的博客
05-05 2777
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>压缩图片</title> </head> <body> <img id="img" src=""> <input id="file"...
input file选择图片回显并压缩体积
weixin_45264424的博客
09-02 700
html： <input type="file" accept="image/*" class="filesBtn" id="addWgBtn" name="outPhotos"> js： $("#addWgBtn").change(function (e) { var files = this.files if (files) { for (var i = 0; i < files.length; i++) {
在上传前用JavaScript压缩图片
最新发布
时清云的博客
08-18 274
我们已经学会了如何使用 canvas 和 DataTransfer 来设置一个不起眼的小脚本，帮助我们在上传前压缩图片。该脚本将使我们的用户更容易上传图片。当然，我们还有很多需要改进的地方，例如，我们可以调整图像大小以适应最大边界框。将图像裁剪成一定的长宽比。更好地处理错误输入并显示合适的错误信息。确保我们能处理 Safari 内存问题。如果我们需要一个更强大的解决方案，我们可以使用 FilePond[3] 来处理文件上传，它可以调整图像大小、压缩等。
input上传图片压缩
u010914880的博客
11-28 1394
<html> <input type="file" id="file" onchange="upload()"/> </html> <script> function upload(){ var file = document.getElementById('file'); var reader = new FileReader();...
JavaScript前端实现压缩图片功能
New_user_的博客
12-08 1674
JavaScript前端实现压缩图片功能为什么要前端来压缩图片接下来看下详细步骤 转自：https://www.jb51.net/article/182078.htm 侵删 为什么要前端来压缩图片 最近在做一个移动端h5上传图片的功能，本来这个功能并不复杂，只需要将图片文件通过axios传到服务端即可，但是考虑到现在手机设配的拍照功能十分强大，随便一张照片都能动辄五六兆，而服务端的要求是上传图片必须小于两兆，而且直接传这么大图片，带宽它也受不了，所以前端进行压缩图片就成了一个必要的环节。 压缩效果 首先介
input 压缩上传图片 vue
_____青絲
11-01 524
<!-- --> <template> <div> <img :src="srcimg" @click="bgclick()"> <!-- 图片 --> <input type="file" style="display:none;" accept="image/*" ref="upload" @ch...
JS前端图片压缩，超详细注释！
无边大仙的博客
10-12 1584
前端利用JS压缩图片，其便利和实用性不用多说，单是上传至服务器时节省的时间和带宽，就能够让人欲罢不能。 这篇文章真的是站在前辈们的肩膀上写成的，代码也是在他们的代码基础上改的，我改的更容易理解一些。代码主要就是实现图片压缩的的功能，其他设置，界面方面，各位自己按照需求来吧。 因为canvas.toDataURL只能改变JPG格式图片的质量，所有这个目前只能压缩JPG。如有大佬知道如何在web上...
js实现图片压缩
qq_63761767的博客
07-04 1007
1. 通过input type="file" 获取图片2. 通过dom获取input节点3. 通过addEventListener('change',function(e){})监听文件获取4. 再addEventListener函数内通过事件对象 e.target.files[0] 获取图5. 编写压缩函数，通过canvas实现压缩。
jQuery实现对file对象的压缩
sqyNick
08-18 5440
在通过js对要上传图片进行压缩时，我利用的是html5中的canvas元素进行辅助，具体思路如下： var reader = new FileReader(); //files[0]对象是从input type=file中获取的file对象 reader.readAsDataURL(files[0]); //将file对象base64转码成功后进入 reader.
移动端HTML5图片上传预览与压缩JavaScript示例及API详解
当用户在`<input type="file">`元素中选择文件时，这些信息会被返回。`FileReader`则是异步读取文件内容的工具，允许我们处理用户选择的文件数据。 为了实现图片预览和压缩，你需要遵循以下步骤： 1. 获取文件信息...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值