html5+js压缩图片上传

最近在折腾移动站的开发,涉及到了一个手机里面上传图片。于是经过N久的折腾,找到一个插件,用法如下:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

<!DOCTYPE HTML>

<html lang="zh-CN">

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0,user-scalable=no" /> 

<head>

    <meta charset="UTF-8">

    <title>LocalResizeIMG</title>

</head>

<style>

    body {

        margin: 20px 20%;

        color:#777;

        text-align: center;

    }

</style>

<body>

    <h1 class="text-center">LocalResizeIMG-本地压缩 1.0</h1>

    <hr/>

    <input type="file" />

    <hr/>

    <!-- javascript

        ================================================== -->

    <script src="/api/localResizeIMG-gh-pages/patch/jquery-2.1.1.min.js" type="text/javascript"></script>

    <script src="/api/localResizeIMG-gh-pages/LocalResizeIMG.js" type="text/javascript"></script>

    

    <!-- mobileBUGFix.js 兼容修复移动设备 -->

    <script src="/api/localResizeIMG-gh-pages/patch/mobileBUGFix.mini.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(‘input:file‘).localResizeIMG({

             width: 500,

             quality: 0.8,

             success: function (result) {

                 var img = new Image();

                 img.src = result.base64;

    

                 $(‘body‘).append(img);

                 //console.log(result);

                $.ajax({

                     url: ‘./uploads.php‘,

                     type: ‘POST‘,

                     data:{formFile:result.clearBase64},

                     dataType: ‘HTML‘,

                     timeout: 1000,

                     error: function(){

                         alert(‘Error loading PHP document‘);

                    },

                     success: function(result){

                         //console.log(result);

                        alert("Uploads success~")

                    }

                 });

             }

         });

    </script>

</body>

</html>

PHP代码:


1

2

3

4

5

6

<?php

    $base64 = $_POST[‘formFile‘];

    $IMG = base64_decode($base64);

    $path = ‘./‘;

    file_put_contents($path.time().‘.jpg‘,$IMG);

?>

在前端把图片压缩,然后转换成为Base64的编码,再把Base64的编码使用AJAX来POST到服务器,然后在PHP解开Base64,写入到一个文件去。

原插件地址:http://github.com/think2011/LocalResizeIMG

然后发现我朋友也写有一篇这个插件的使用的文章,地址在这里:http://a3147972.blog.51cto.com/2366547/1551066

时间: 2024-11-09 22:09:44

html5+js压缩图片上传的相关文章

js 压缩图片 上传

感谢,参考了以下作者的绝大部分内容 https://blog.csdn.net/tangxiujiang/article/details/78755292 https://blog.csdn.net/u011415782/article/details/79978608 大概的流程就是 点击file选择图片 js将图片解读出base64编码,然后通过js将base64编码转为压缩后的base64 然后通过ajax或者form把压缩后的base64编码提交到服务器(php) 然后php将base6

js压缩图片上传

1.实现,自己看代码去 // 图片压缩 // 接收三个参数: // file:是读取的文件,需要input type="file"获取或者通过js获取 // rate:压缩比例:按照原来图片的百分比 // maxSize: 压缩后的最大文件 // rate有则使用rate,最大限制拦截,会判断rate后是否大于maxSize,如果大于,则剪切,不大于,这rate // fileType:返回内容的类型:file即压缩后的第一个参数,blob是blob文件,base64是base64文件

JS实现图片上传预览效果:方法一

<script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) { //判断浏览器是否有FileReader接口 if(typeof FileReader =='undefined') { /*$("#images_show").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口

megapix-image插件 使用Canvas压缩图片上传

<!DOCTYPE html > <html> <head> <title>通过Canvas及File API缩放并上传图片</title> <script src="/Scripts/Jquery/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="/Scripts/MegaPixIm

纯js实现图片上传

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head><title>本地图片预览</title><

HTML5 file API加canvas实现图片前端JS压缩并上传 (转载)

一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 最最重要的体验改进点:省略了图片的再加工成本.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的.然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片

html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题

先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html页面 需要引入weui.min.css 不然没法渲染样式, 将下面的代码放在需要上传文件的地方就行了,如果不需要图片旋转功能, 可以直接删掉那个div, 改不改js无影响 addPhoto.html <!--图片缩略图--> <div class="weui-cells weui-

js实现图片上传预览原理

现在网上有很多成熟的图片上传的插件,由于之前对于图片上传未接触过,不了解其实现原理.网上查阅了相关资料,了解到其是基于FileReader Api. 众所周知,大家平时做兼容性都是为了兼容低版本浏览器,图片上传则恰恰相反.基于浏览器的安全策略,file标签在现代浏览器中已经获取不到真实路径.恰恰相反,低版本ie却能获取到真实物理路径.所以此功能是基于现代浏览器的解决方案. FileReader就是html5为我们提供的读取文件的api.它的作用就是把文本流按指定格式读取到缓存,以供js调用. F

node.js实现图片上传(包含缩略图)

图片上传 使用multiparty插件实现上传 安装multiparty npm i --save multiparty 代码实现 const multiparty = require('multiparty'); let form = new multiparty.Form({uploadDir: upload.path}); 构造参数说明 encoding 设置接收数据编码,默认是utf-8 maxFieldsSize 限制字段可以分配的内存量,默认2M maxFields 限制在发出错误事