多图片选择和上传

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

主要用了Uploadify插件,还有AJAX。 兼容各种主流浏览器:chrome Firefox IE ... IE7以上都兼容,IE6没试过。 因为Uploadify是用flash做的,所以如果浏览器上面看不到"上传"按钮,请先检查你的flash是否已安装。 压缩包里包含两个项目,一个是多图上传的示例(不含数据库),另一个也是多图上传的示例,不过这个可以修改每张图片的描述,所以用了SQL数据库。 项目中UploadHandler.ashx里面有等比例生成缩略图和裁剪图片的方法,如有需要可直接调用。 第一个项目和第二个项目都主要用Jquery AJAX Uploadify来完成上传图片的功能。很简单的代码,不会复杂。如果不认识这三个东西的,建议百度或谷歌一下。 第二个项目用了linq to sql进行对SQL数据库的操作,包括上传图片时对数据库进行插入数据的操作,删除图片时对数据库进行删除的操作,设置"封面图片"时对数据库的操作。 这个我是用ASP.NET建的项目,如果你是其他平台的也可以参考里面某些代码,如Uploadify上传,Jquery对图片列表的操作。 其他的具体看项目,代码片段: PicUpload.js : //删除图片 function deletePic(n) { $.ajax({ type: "GET", url: "/api/UploadHandler.ashx?action=deletePic", data: "picName=" + n + "&ver=" + new Date().getTime(), dataType: "html", success: function (data) { if (data.length > 10) { $("li[id='p_" + n.replace(".jpg", "") + "']").remove(); } } }) } UploadHandler.ashx : //删除图片 public bool DeletePic(string pName) { string uploadPath = HttpContext.Current.Server.MapPath("~/Upload/" + pName); if (System.IO.File.Exists(uploadPath)) { System.IO.File.Delete(uploadPath); Album query = (from item in db.Album where item.Pname == pName select item).First(); db.Album.DeleteOnSubmit(query); db.SubmitChanges(); return true; } else return false; } 最后简单说下Uploadify,Uploadify的介绍网上都很多,也有很多的示例。我就说说功能,看下面的代码: $(document).ready(function () { $("#uploadify").uploadify({ 'uploader': '/js/jquery.uploadify-v2.1.0/uploadify.swf', 'script': '/api/UploadHandler.ashx', 'cancelImg': '/js/jquery.uploadify-v2.1.0/cancel.png', 'folder': '/Upload', 'queueID': 'fileQueue', 'auto': true, 'multi': true, 'fileDesc': '请选择.jpg .png .bmp .jpeg文件', 'fileExt': '*.jpg;*.png;*.bmp;*.jpeg;', 'onComplete': function (e, queueId, fileObj, data) { $("#photoListUl").append(data); $("#progressText2").hide(); document.getElementById('photoListUl').scrollTop = "99999"; }, 'onSelect': function (e, queueId, fileObj) { $("#progressText1").text(iSum++); $("#progressText2").show(); } }); }); function uploadFile() { jQuery('#uploadify').uploadifyUpload() } 可以限定选择上传的文件类型,我这里是上传图片. 可以限定要上传的文件的大小,如限定为15M? 可以在上传的时候添加参数或各种验证. 这些你在网上可以找到很多例子的,我在项目里就不添加上去了。 ----------------------------------------------------------------- 项目仅供参考。如有疑问可直接回复或企鹅: 514158268
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值