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

最新推荐文章于 2023-08-18 16:04:10 发布
最新推荐文章于 2023-08-18 16:04:10 发布
阅读量383 收藏 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>

⁣ ⁣⁣⁣⁣ ⁣⁣⁣⁣ ⁣⁣
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 input file 图片上传，压缩，上传，预览
qq_16591861的博客
07-03 3378
上传 预览框 $('#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 633
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 3512
//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 7569
本文实例为大家分享了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 1546
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
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
10-19
总的来说，Vue.js 2.0 移动端拍照压缩图片预览及上传实例涉及的技术点包括Vue组件、事件绑定、文件操作、图片压缩、预览、上传以及可能的原生API调用。在实际开发中，需要根据项目需求选择合适的方法和技术栈，并...
JS和Canvas实现图片的预览压缩和上传功能
12-02
在选定了图片后 upload 函数将被触发，我们需要在这个函数中，获取到图片的资源，将它压缩并利用canvas绘制出来，若需要上传到服务器，也可以利用ajax或者其他方式上传。 第二步：获取图片资源压缩预览上传 ...
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
08-30
1. 图片选择：通过`<input type="file">`控件让用户选择图片。 2. 图片预览：使用FileReader将图片转换为Base64格式并显示预览。 3. 图片旋转校正：通过`exif-js`库获取Exif信息，修正因设备拍摄角度导致的旋转问题...
JS实现压缩上传图片base64长度功能
10-15
为了压缩图片，我们检查图片是否大于80KB。如果是，我们需要调整图片的尺寸。根据图片的宽高比例，计算出一个缩放因子`scale`，确保图片的最长边不超过300像素。然后，利用`HTML5`的`Canvas`元素，通过`canvas....
html+css+js 实现拍照预览上传图片功能
12-09
这种方式虽然也能实现功能，但用户体验上可能会差了一些，所以本文记录了使用css+js实现图片选中后的预览及压缩上传功能，部分带来来源于网络，此处做了记录整理。 效果预览：   1.创建index.html <!DOCTYPE ...
input file图片压缩踩坑
小菜鸡程序媛的挣扎史
09-29 776
<!--调用canvas方法--> <canvas id="canvas"></canvas> <!--压缩后的图片路劲--> <img src="" class="preview"> <img src="" class="preview"> <!--原图压缩--> <img class="source" ...
前端input file 图片压缩
一只会喊666的咸鱼的博客
05-05 2707
<!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 664
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++) {
input上传图片压缩
u010914880的博客
11-28 1351
<html> <input type="file" id="file" onchange="upload()"/> </html> <script> function upload(){ var file = document.getElementById('file'); var reader = new FileReader();...
在上传前用JavaScript压缩图片
最新发布
时清云的博客
08-18 219
我们已经学会了如何使用 canvas 和 DataTransfer 来设置一个不起眼的小脚本，帮助我们在上传前压缩图片。该脚本将使我们的用户更容易上传图片。当然，我们还有很多需要改进的地方，例如，我们可以调整图像大小以适应最大边界框。将图像裁剪成一定的长宽比。更好地处理错误输入并显示合适的错误信息。确保我们能处理 Safari 内存问题。如果我们需要一个更强大的解决方案，我们可以使用 FilePond[3] 来处理文件上传，它可以调整图像大小、压缩等。
JavaScript前端实现压缩图片功能
New_user_的博客
12-08 1527
JavaScript前端实现压缩图片功能为什么要前端来压缩图片接下来看下详细步骤 转自：https://www.jb51.net/article/182078.htm 侵删 为什么要前端来压缩图片 最近在做一个移动端h5上传图片的功能，本来这个功能并不复杂，只需要将图片文件通过axios传到服务端即可，但是考虑到现在手机设配的拍照功能十分强大，随便一张照片都能动辄五六兆，而服务端的要求是上传图片必须小于两兆，而且直接传这么大图片，带宽它也受不了，所以前端进行压缩图片就成了一个必要的环节。 压缩效果 首先介
input 压缩上传图片 vue
_____青絲
11-01 501
<!-- --> <template> <div> <img :src="srcimg" @click="bgclick()"> <!-- 图片 --> <input type="file" style="display:none;" accept="image/*" ref="upload" @ch...
JS前端图片压缩，超详细注释！
无边大仙的博客
10-12 1499
前端利用JS压缩图片，其便利和实用性不用多说，单是上传至服务器时节省的时间和带宽，就能够让人欲罢不能。 这篇文章真的是站在前辈们的肩膀上写成的，代码也是在他们的代码基础上改的，我改的更容易理解一些。代码主要就是实现图片压缩的的功能，其他设置，界面方面，各位自己按照需求来吧。 因为canvas.toDataURL只能改变JPG格式图片的质量，所有这个目前只能压缩JPG。如有大佬知道如何在web上...
jQuery实现对file对象的压缩
sqyNick
08-18 5326
在通过js对要上传图片进行压缩时，我利用的是html5中的canvas元素进行辅助，具体思路如下： var reader = new FileReader(); //files[0]对象是从input type=file中获取的file对象 reader.readAsDataURL(files[0]); //将file对象base64转码成功后进入 reader.
js input type=file 赋值 http网络file
06-09
在JavaScript中，由于安全限制，无法直接通过input type=file控件将http网络文件的路径赋值给input元素。这是由于浏览器出于安全考虑，不允许网页访问用户的本地文件系统或远程文件系统。 如果您需要显示一个网络文件的链接，您可以使用HTML `<a>`标签。例如： ```html <a href="http://example.com/myfile.pdf">myfile.pdf</a> ``` 如果您需要下载网络文件，您可以使用JavaScript的XMLHttpRequest对象来下载文件，并将文件数据赋值给input元素的value属性。例如： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://example.com/myfile.pdf', true); xhr.responseType = 'blob'; xhr.onload = function(e) { if (this.status == 200) { var file = new Blob([this.response], {type: 'application/pdf'}); var fileUrl = URL.createObjectURL(file); var inputElement = document.getElementById('myInput'); inputElement.value = fileUrl; } }; xhr.send(); ``` 这段代码会使用XMLHttpRequest对象下载http://example.com/myfile.pdf文件，并将文件数据赋值给一个Blob对象。然后，通过URL.createObjectURL()方法将Blob对象转换为URL，并将URL赋值给input元素的value属性。注意，在这个例子中，input元素的type属性应该为"text"或"url"，而不是"file"。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值