多图片选择和上传

大多数社交类的app都会含有图片选择和上传,于是图片选择就是一个比较重要的问题。一般情况下,我们点击选择照片进入图片列表,这时候图片的显示以及图片的查找是一个比较麻烦的问题。网络上的demo很多,今天无意间看到一个,虽然功能不齐全,但是感觉加载效果还是 挺不错的。地址demo地址
选择之后当然就是图片的上传,我们都知道,不同的手机分辨率什么都不同,照出来的照片大小也不同。相同的清晰度,android手机可能是苹果的三倍大小。如果就这样上传,速度是很低的。那么我们必须进行压缩,android自带的压缩真心不好用,感觉压缩效果很一般 。每次我再上传的时候都要花费很长的时间,这对于用户来说是很差的体验。于是研究了一下微信,微信在上传图片的时候,很快就发到了朋友圈,其实不然。在点击上传之后,微信是开启一个service,默默的在后台上传,当他提示上传成功 的时候,我们的朋友圈已经显示你的图片,但是,别人是看不到的,这时候微信依然在默默的上传。也就是说,微信在我们的朋友圈使用的是假的数据,这个数据还没有上传到它的服务器。只有后台完全上传之后,你的好友才能看到。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用以下代码来实现jQuery多图片上传: 首先,在HTML文件的<head>标签中引入jQuery库和相关的CSS和JS文件 。 然后,在<body>标签中创建一个<div>容器,用于显示上传图片 。 接下来,在<script>标签中定义一个全局变量fileArr,用于保存选择图片数组 。 然后,编写一个名为multipleFiles的函数,用于上传多个图片。在这个函数中,首先判断是否选择了需要上传图片,如果没有则提示用户选择图片并返回 。然后,创建一个FormData对象fu,用于存储要上传的文件。接下来,使用一个循环将每个选择的文件添加到FormData对象中。最后,使用ajax将FormData对象发送到后台,并处理成功和失败的回调函数 。 最后,在页面加载完成后,调用上述的multipleFiles函数来实现多图片上传功能 。 请注意,您可以根据需要自定义相关参数,例如限制上传个数、像素限制等 。 以下是实现jQuery多图片上传的代码示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="imgfileupload.css" rel="stylesheet"> </head> <body> <div class="imgupBox"></div> <script src="jquery.min.js"></script> <script type="text/javascript" src="imgFileupload.js"></script> <script type="text/javascript"> var fileArr = []; function multipleFiles() { var files = fileArr; var length = files.length; if (length == 0) { alert("请选择需要上传图片!"); return; } var fu = new FormData(); for (var i = 0; i < files.length; i++) { fu.append("file", files[i]); } $.ajax({ type: "post", url: "/uploadimgs", data: fu, cache: false, contentType: false, processData: false, success: function(data, status) { alert("图片上传成功!"); }, error: function(data) { alert("图片上传失败!"); }, complete: function() {} }); } var imgFile = new ImgUploadeFiles('.imgupBox', function(e) { this.init({ MAX: 3, MH: 5800, MW: 5900, callback: function(arr) { fileArr = arr; console.log(arr); // 可以在这里调用multipleFiles函数来实现图片上传 } }); }); </script> </body> </html> ``` 请注意,上述代码仅为示例代码,您需要根据实际情况进行修改和调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值