html5压缩图片并上传

手机端图片有很大的,上传的时候很慢,这时候就要压缩一下了,有一个开源的js可以压缩图片的大小,开源地址如下:https://github.com/think2011/localResizeIMG3

代码如下:

    // 上传图片
    function uploadFile(path) {
        var type = plus.storage.getItem("upload_goods_image");
        //选择成功
        $("#heisebg").removeClass("heisebg").addClass("heisebghid");
        $("#waitingupload").removeClass("heisebghid").addClass("heisebg");

        //https://github.com/think2011/localResizeIMG3
        // 压缩图片
        lrz(path, {
            width: 500,
            quality: 0.7,
            done: function (results) {
                $.ajax({
                    type: "POST",
                    url: configManager.RequstUrl + "api/common/base64upload",
                    async: true,
                    data: { base64: results.base64, size: results.base64.length, dir: "goods" }
                }).done(function (data) {
                    if (data.state != "success") { console.log(data.message); return; }
                    var src = configManager.goodsImgurl.format(data.id, "") + ‘500-200‘;
                    if ("addspic" == type) {
                        var sImageStr = "<img width=‘98%‘ onclick=‘javascript:$(this).remove();‘ class=‘spic‘ title=‘{0}‘ src=‘{1}‘>";
                        $("#addspic").before(sImageStr.format(data.id, src));
                    }
                    if ("addbpic" == type) {
                        var bImageStr = "<img width=‘98%‘ id=‘bpic‘ title=‘{0}‘ src=‘{1}‘/>";
                        $("#addbpic").html(bImageStr.format(data.id, src));
                    }
                    $("#waitingupload").removeClass("heisebg").addClass("heisebghid");
                    try { myScroll.refresh(); } catch (err) { }
                }).fail(function () {
                    plus.nativeUI.toast("上传失败!");
                    $("#waitingupload").removeClass("heisebg").addClass("heisebghid");
                });
            }
        });
    }
时间: 2024-10-22 00:34:32

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

ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结

相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过UIImagePickerController类提供的交互对话框来从相册中选择图像.但是,注意:相册中的图片机器路径无法直接从应用程序访问,只能通过终端用户去选择和使用相册图片 应用程序包 应用程序包可能会将图像与可执行程序.Info.plist文件和其他资源一同存储.我们可以通过本地文件路径来读取这些基于包的图像并在应用程序中显示它们. 沙盒 借助沙盒,我们可以把图片存储到Documents.Library.tmp文

使用PhoneGap裁剪和压缩图片并上传(安卓版)

安装phonegap的camera插件后,可以对从图片库选择图片进行裁剪或压缩操作,但插件本身有些问题,经过改进,现在可以顺利完成上述功能. 安装方法 1 首先使用命令行安装camera插件: phonegap plugin add org.apache.cordova.camera 2 安装成功后,下载下面的CameraLauncher.java文件,将插件包中的同名文件替换掉: http://phonegap.jiusem.net/camera/src/android/CameraLaunc

基于HTML5多图片Ajax上传可预览

html5多图控件<input id="fileImage" type="file" size="30" name="files[]" multiple /> multiple 这个input的特性是html5新有的,所以IE6这么低级的货是无法兼容的. 这个属性相当于以前的这样的多图情况 <input id="fileImage" type="file" size=&

如何有效实现前端压缩图片并上传功能

随着现在手机的像素越来越高,很多照片动辄几兆甚至十几兆,上传后在服务器端压缩已经越来越不能满足当今的需求.这对于许多技术人员来说,处理起来这样的问题往往不知道该怎么下手,那么下面就跟大家讲解一下如何在前端进行图片压缩后上传到服务器. 以上传单张图片为例,多张图片同理,多嵌套一层循环即可.代码实现如下: html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta

Xamarin.Android 压缩图片并上传到WebServices

随着手机的拍照像素越来越高,导致图片赞的容量越来越大,如果上传多张图片不进行压缩.质量处理很容易出现OOM内存泄漏问题. 最近做了一个项目,向webservices上传多张照片,但是项目部署出来就会出现闪退现象,后来经行调试发现图片没有进行压缩,一张图片大小为2M,然而webservices没法接搜多个大图片,所以需要改下配置文件,我这里改为40M. <system.web> <httpRuntime maxRequestLength = "40960" useFul

javaScript:压缩图片并上传

html代码: <input id="file" type="file" name="filesName"> js代码: var fileElement = document.getElementById('#file'); fileElement.onchange = function(){ var file = event.target.files[0]; var upload = new uploadThumbnail({ //

微信小程序压缩图片并上传到服务器(拿去即用)

这里注意一下,图片压缩后的宽度是画布宽度的一半 canvasToTempFilePath 创建画布的时候会有一定的时间延迟容易失败,这里加setTimeout来缓冲一下 这是单张图片压缩,多张的压缩暂时还没有成功,保存到服务器上后是空白的,如有大神望指点一二(>人<:) <canvas canvas-id='photo_canvas' style='width:1000rpx;height:{{canvas_h}}px' class='myCanvas'></canvas&g

html5 XMLHttpRequest 图片异步上传

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <tilte>uploadFile</title> <script> function uploadFile(){ var formData = new FormData(); var files = document.getElementById('file').files; var file

基于HTML5的可预览多图片Ajax上传

一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观. 我之前曾翻译编辑过一篇“Ajax Upload多文件上传插件”的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已. HTML5是个好东东,其中之一就是支