移动端图片上传老失败
2024-04-13 02:59:01
做移动端开发的时候，form里面的file后台经常获取不到，用foemdata也拿不到
找到了一个formdata的脚本
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><title>移动端图片压缩上传demo</title><style>*{margin: 0;padding: 0;}li{list-style-type: none;}a,input{outline: none;-webkit-tap-highlight-color:rgba(0,0,0,0);}#choose{display: none;}canvas{width: 100%;border: 1px solid #000000;}#upload{display: block;margin: 10px;height: 60px;text-align: center;line-height: 60px;border: 1px solid;border-radius: 5px;cursor: pointer;}.touch{background-color: #ddd;}.img-list{margin: 10px 5px;}.img-list li{position: relative;display: inline-block;width: 100px;height: 100px;margin: 5px 5px 20px 5px;border: 1px solid rgb(100,149,198);background: #fff no-repeat center;background-size: cover;}.progress{position: absolute;width: 100%;height: 20px;line-height: 20px;bottom: 0;left: 0;background-color:rgba(100,149,198,.5);}.progress span{display: block;width: 0;height: 100%;background-color:rgb(100,149,198);text-align: center;color: #FFF;font-size: 13px;}.size{position: absolute;width: 100%;height: 15px;line-height: 15px;bottom: -18px;text-align: center;font-size: 13px;color: #666;}.tips{display: block;text-align:center;font-size: 13px;margin: 10px;color: #999;}.pic-list{margin: 10px;line-height: 18px;font-size: 13px;}.pic-list a{display: block;margin: 10px 0;}.pic-list a img{vertical-align: middle;max-width: 30px;max-height: 30px;margin: -4px 0 0 10px;}</style>
</head>
<body>
<input type="file" id="choose" accept="image/*" multiple>
<ul class="img-list"></ul>
<a id="upload">上传图片</a>
<span class="tips">只允许上传jpg、png及gif</span>
<div class="pic-list">你上传的图片(图片有效期为1分钟)：
</div><script src="/public/jquery-2.1.1.min.js"></script>
<script>var filechooser = document.getElementById("choose");// 用于压缩图片的canvasvar canvas = document.createElement("canvas");var ctx = canvas.getContext('2d');// 瓦片canvasvar tCanvas = document.createElement("canvas");var tctx = tCanvas.getContext("2d");var maxsize = 100 * 1024;$("#upload").on("click", function() {filechooser.click();}).on("touchstart", function() {$(this).addClass("touch")}).on("touchend", function() {$(this).removeClass("touch")});filechooser.onchange = function() {if (!this.files.length) return;var files = Array.prototype.slice.call(this.files);if (files.length > 9) {alert("最多同时只可上传9张图片");return;}files.forEach(function(file, i) {if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;var reader = new FileReader();var li = document.createElement("li");
// 获取图片大小var size = file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024)) / 10 + "MB" : ~~(file.size / 1024) + "KB";li.innerHTML = '<div class="progress"><span></span></div><div class="size">' + size + '</div>';$(".img-list").append($(li));reader.onload = function() {var result = this.result;var img = new Image();img.src = result;$(li).css("background-image", "url(" + result + ")");//如果图片大小小于100kb，则直接上传if (result.length <= maxsize) {img = null;upload(result, file.type, $(li));return;}
// 图片加载完毕之后进行压缩，然后上传if (img.complete) {callback();} else {img.onload = callback;}function callback() {var data = compress(img);upload(data, file.type, $(li));img = null;}};reader.readAsDataURL(file);})};// 使用canvas对大图片进行压缩function compress(img) {var initSize = img.src.length;var width = img.width;var height = img.height;//如果图片大于四百万像素，计算压缩比并将大小压至400万以下var ratio;if ((ratio = width * height / 4000000) > 1) {ratio = Math.sqrt(ratio);width /= ratio;height /= ratio;} else {ratio = 1;}canvas.width = width;canvas.height = height;
// 铺底色ctx.fillStyle = "#fff";ctx.fillRect(0, 0, canvas.width, canvas.height);//如果图片像素大于100万则使用瓦片绘制var count;if ((count = width * height / 1000000) > 1) {count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
// 计算每块瓦片的宽和高var nw = ~~(width / count);var nh = ~~(height / count);tCanvas.width = nw;tCanvas.height = nh;for (var i = 0; i < count; i++) {for (var j = 0; j < count; j++) {tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);}}} else {ctx.drawImage(img, 0, 0, width, height);}//进行最小压缩var ndata = canvas.toDataURL('image/jpeg', 0.1);console.log('压缩前：' + initSize);console.log('压缩后：' + ndata.length);console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;return ndata;}// 图片上传，将base64的图片转成二进制对象，塞进formdata上传function upload(basestr, type, $li) {var text = window.atob(basestr.split(",")[1]);var buffer = new Uint8Array(text.length);var pecent = 0, loop = null;for (var i = 0; i < text.length; i++) {buffer[i] = text.charCodeAt(i);}var blob = getBlob([buffer], type);var xhr = new XMLHttpRequest();var formdata = getFormData();formdata.append('imagefile', blob);xhr.open('post', '/cupload');xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {var jsonData = JSON.parse(xhr.responseText);var imagedata = jsonData[0] || {};var text = imagedata.path ? '上传成功' : '上传失败';console.log(text + '：' + imagedata.path);clearInterval(loop);//当收到该消息时上传完毕$li.find(".progress span").animate({'width': "100%"}, pecent < 95 ? 200 : 0, function() {$(this).html(text);});if (!imagedata.path) return;$(".pic-list").append('<a href="' + imagedata.path + '">' + imagedata.name + '（' + imagedata.size + '）<img src="' + imagedata.path + '" /></a>');}};//数据发送进度，前50%展示该进度xhr.upload.addEventListener('progress', function(e) {if (loop) return;pecent = ~~(100 * e.loaded / e.total) / 2;$li.find(".progress span").css('width', pecent + "%");if (pecent == 50) {mockProgress();}}, false);//数据后50%用模拟进度function mockProgress() {if (loop) return;loop = setInterval(function() {pecent++;$li.find(".progress span").css('width', pecent + "%");if (pecent == 99) {clearInterval(loop);}}, 100)}xhr.send(formdata);}/*** 获取blob对象的兼容性写法* @param buffer* @param format* @returns {*}*/function getBlob(buffer, format) {try {return new Blob(buffer, {type: format});} catch (e) {var bb = new (window.BlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder);buffer.forEach(function(buf) {bb.append(buf);});return bb.getBlob(format);}}/*** 获取formdata*/function getFormData() {var isNeedShim = ~navigator.userAgent.indexOf('Android')&& ~navigator.vendor.indexOf('Google')&& !~navigator.userAgent.indexOf('Chrome')&& navigator.userAgent.match(/AppleWebKit\/(\d+)/).pop() <= 534;return isNeedShim ? new FormDataShim() : new FormData()}/*** formdata 补丁, 给不支持formdata上传blob的android机打补丁* @constructor*/function FormDataShim() {console.warn('using formdata shim');var o = this,parts = [],boundary = Array(21).join('-') + (+new Date() * (1e16 * Math.random())).toString(36),oldSend = XMLHttpRequest.prototype.send;this.append = function(name, value, filename) {parts.push('--' + boundary + '\r\nContent-Disposition: form-data; name="' + name + '"');if (value instanceof Blob) {parts.push('; filename="' + (filename || 'blob') + '"\r\nContent-Type: ' + value.type + '\r\n\r\n');parts.push(value);}else {parts.push('\r\n\r\n' + value);}parts.push('\r\n');};// Override XHR send()XMLHttpRequest.prototype.send = function(val) {var fr,data,oXHR = this;if (val === o) {// Append the final boundary stringparts.push('--' + boundary + '--\r\n');// Create the blobdata = getBlob(parts);// Set up and read the blob into an array to be sentfr = new FileReader();fr.onload = function() {oldSend.call(oXHR, fr.result);};fr.onerror = function(err) {throw err;};fr.readAsArrayBuffer(data);// Set the multipart content type and boudarythis.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);XMLHttpRequest.prototype.send = oldSend;}else {oldSend.call(this, val);}};}
</script>
</body>
</html>
转载于:https://www.cnblogs.com/anxiaoyu/p/7601993.html
移动端图片上传老失败相关推荐
- 移动端图片上传后进行压缩功能
移动端图片上传后进行压缩功能 在进行讲解上传图片压缩之前,我们先来了解下HTML5中的文件上传的基本知识点. 一: FileList对象与file对象. FileList对象表示用户选择的文件列表.在 ...
- 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...
- vue移动端图片上传
一.服务端环境准备 本文服务端主要为nodejs,利用multer中间件完成图片上传功能.服务端安装express框架和multer. npm install express --save npm i ...
- php 图片压缩旋转,移动端图片上传旋转、压缩问题的解决方案
本篇文章就给大家带来移动端图片上传旋转.压缩问题的解决方案.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 前言 在手机上通过网页 input 标签拍照上传图片,有一些手机会出现图片 ...
- JavaScript移动端图片上传方法
移动端图片上传方法 实现效果 文件下载 http://files.cnblogs.com/files/sntetwt/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%9B%BE%E7%8 ...
- 移动端图片上传裁切（版权归秒为所有，仅为搬运）
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport&quo ...
- 优化篇-“移动端”图片上传架构的变迁
做互联网应用少不了图片的支撑,图片的上传.浏览速度很大程度上决定着用户的体验,甚至用户去留,就因为其重要,所以,在任何时候,图片的架构和优化都在进行,不敢丝毫放松. 在以后几个章节,会从后端图片存储. ...
- Js 之移动端图片上传插件mbUploadify
一.下载 https://pan.baidu.com/s/1NEL4tkHoK4ydqdMi_hgWcw 提取码:vx7e 二.Demo示例 <div class="weui_uplo ...
- 移动端图片上传并生成图片（图片上传/图片压缩/图片绘制/Vue纯前端）
如今用户上传图片,生成图保存分享这些都是h5页面的基操了吧,十分常见,实际操作起来也是满满的技能点,其实也有很多兼容问题的坑. 下面是以vue+elementUI做的一套,有需要的直接拿去- 如果有对 ...
- ios 上传图片失败 小程序_微信小程序图片上传时，iOS端第一次上传必定失败，nignx返回400，短时间内再次上传可以成功。 而安卓端完美运行。...
自己分析: 1 是小程序本身兼容有问题. 2 是nginx配置问题. 已经逛过小程序官方社区,看到有几个人遇到跟我一样的问题,但都没有被详细答复.我也详细描述了一下自己的问题. https://dev ...
最新文章
- linux 特殊符号（转）
- Laravel的初始化安装
- android SQLite数据库用法图文详解（附源码）
- Teradata QA Tester 职位
- 手机上可以学python吗_Python爬虫也能用手机进行抓包？没错！这个技巧我只告诉你...
- 神策数据受邀参加全国 APP 个人信息保护监管会
- 架构成长之路：常见的五种MySQL高可用方案分析
- 200806C阶段一结构体
- markdown 中的一些 html 使用属性
- 图书管理系统（说明文档与相关代码）
- Java面试官：Kafka集群管理
- 树莓派和机器人有啥关系(也有jetson tx2的知识主要)
- 千峰教育2218期2022.10.19日
- SlickEdit 之--配置传承
- jvm-垃圾回收（垃圾收集器）
- 饭店点餐系统之模块划分
- 彻底理解样本方差为何除以n-1
- 印象笔记桌面便签关闭后找回
- 自动切换输入法 mac版能让你在不同的应用之间自动的切换输入法
- windows下kafka环境完整搭建，Python调用kafka构建完整实例分析与应用