GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - mishe/Imageupload: 使用File API上传普通文件,结合canvas 客户端压缩图片,并实现文件上传服务端, 新增加vue下的上传插件

BranchesTags
Open more actions menu

Latest commit

 

History

21 Commits
21 Commits

Folders and files

NameName
Last commit message
Last commit date
MobileUpload.JS
MobileUpload.JS
 
 
README.md
README.md
 
 
exif.js
exif.js
 
 
vue_plugin.js
vue_plugin.js
 
 

Repository files navigation

Imageupload

使用File API+canvas 客户端压缩图片,并实现文件上传服务端,文件依赖 JQUERY

2017-02-08 解决拍摄的图片旋转角度问题,图片压缩问题

借鉴参考:http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201409/278736.shtml

参数API

  • loading:'.loading', 页面显示loading的图标selector
  • url:'', 接收数据的api接口地址
  • maxFileSize:1010241024, 服务端支持的最大单文件大小
  • format:/^image/i, 支持的文件格式. images text .....
  • isCompress:true, 如果是图片,可以开启客户端压缩,减少传输的数据文件
  • compressNum:0.6, 图片的压缩率,0~1 设置为1可能最终结果比未压缩还大,请慎用1.
  • clipSquare:false,             压缩上传前把图片截取成正方形
  • maxX:500, 压缩后的图片最大宽度
  • maxY:500, 压缩后的图片最大高度
  • beforeUpload:function(){}, 上传之前的处理,返回false可以阻止文件的上传
  • uploadStart: function(){}, 开始上传的回调
  • afterUpload: function(){}, 上传结束的回调
  • uploadProgress: function(v){} 上传的进度条
  • uploadError: function(){} 上传错误的回调
  • showThumbnail:function(){} 显示缩略图

使用范例:

<div id="proccess"></div>
压缩前:<div id="rrr1"></div>
<br>
<input type="file" multiple  id="filesss" >
<br> 压缩后:<div id="rrr2"></div>
<br>
$('#filesss').mobileUpload({
        url: '',
        beforeUpload: function () {
            console.log('beforeUpload')
        },
        uploadStart: function (file) {
            console.log('uploadStart')
            console.log('原文件大小:' + file.length);
        },
        uploadProgress: function (v) {console.log('进度' + v)},
        uploadError: function () {console.log('uploadError')},
        showThumbnail: function (file,imgRotation) {
            $('#rrr1').append('<img src="' + file + '">').css('transform','rotate('+(imgRotation)+'deg)')
        },
        afterUpload: function (file, data) {
            console.log('压缩后大小:' + file.length);
            $('#rrr2').append('<img src="' + file + '">');
        }
    });

About

使用File API上传普通文件,结合canvas 客户端压缩图片,并实现文件上传服务端, 新增加vue下的上传插件

Resources

Readme
Activity

Stars

55 stars

Watchers

4 watching

Forks

14 forks
Report repository

Releases

Packages

Contributors

Languages

You are visitor 01402520 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.