js移动端图片压缩上传功能
(编辑：jimmy 日期: 2025/10/24 浏览：3 次 )
移动端图片压缩上传功能如何实现？
做移动端开发的时候，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="/UploadFiles/2021-04-02/jquery-2.1.1.min.js">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：微信小程序报错：this.setData is not a function的解决办法