文件名称：相册 多图片上传
文件大小：2.01MB
文件格式：ZIP
更新时间：2016-10-01 04:32:14
相册 多图 多图片上传 Uploadify AJAX
主要用了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