jquery相册代码(相册代码html)
admin 发布:2022-12-19 23:28 130
今天给各位分享jquery相册代码的知识,其中也会对相册代码html进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
- 1、jQuery或js将网页保存到手机相册
- 2、jQuery File Upload 图片预览代码如何写
- 3、当点击带+的图片时,弹出手机相册,可以选择手机相册内的图片上传,代码如何写?怎么实现?
- 4、jQuery实现带滚动导航效果的全屏滚动相册实例
jQuery或js将网页保存到手机相册
设置宽度为100%,列表就可以适应屏幕。同时如果你的头像要保证是正方形,就要使用js计算并动态赋值宽度和高度。如使用jq语句$(id).css("width","150px");$(id).css("height","150px");就是一个正方形,当然,不一定是150px,具体的宽度也可以动态获取屏幕并计算。
jQuery File Upload 图片预览代码如何写
jQuery File Upload是上传文件的一个插件,不一定是图片,所以里面没做预览的支持。但是可以直接用jquery简单实现出来,代码如下:
/*
先在js里扩展一个uploadPreview方法
使用方法:
div
img id="ImgPr" width="120" height="120" //div
input type="file" id="up" /
把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }});
*/
jQuery.fn.extend({
uploadPreview: function (opts) {
var _self = this,
_this = $(this);
opts = jQuery.extend({
Img: "ImgPr",
Width: 100,
Height: 100,
ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
Callback: function () {}
}, opts || {});
_self.getObjectURL = function (file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
};
_this.change(function () {
if (this.value) {
if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert("选择文件错误,图片类型必须是" + opts.ImgType.join(",") + "中的一种");
this.value = "";
return false
}
if ($.browser.msie) {
try {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
} catch (e) {
var src = "";
var obj = $("#" + opts.Img);
var div = obj.parent("div")[0];
_self.select();
if (top != self) {
window.parent.document.body.focus()
} else {
_self.blur()
}
src = document.selection.createRange().text;
document.selection.empty();
obj.hide();
obj.parent("div").css({
'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
'width': opts.Width + 'px',
'height': opts.Height + 'px'
});
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
}
} else {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
}
opts.Callback()
}
})
}
});
然后是HTML页面进行调用:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
html xmlns="
head
title图片上传预览演示/title
script src="jquery.min.js" type="text/javascript"/script
script src="16/uploadPreview.js" type="text/javascript"/script
script
$(function () {
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });
});
/script
/head
body
div style="width:500px;margin:0px auto;"h2图片上传预览演示/h2
divimg id="ImgPr" width="120" height="120" //div
input type="file" id="up" /
/div
/body
/html
当点击带+的图片时,弹出手机相册,可以选择手机相册内的图片上传,代码如何写?怎么实现?
首先需要引用 js 和css
!--上传控件--
2 script src="query.form.min.js"/script
3 link href="Img_List.css" rel="stylesheet" /
4 script src="Img_List.js"/script
Img_List.js 如下:
/// reference path="../../script/jquery-1.8.0.min.js" /
//显示
function imgshow(obj) {
//$(obj).find("a").show();
}
//隐藏
function imghide(obj) {
//$(obj).find("a").hide();
}
//上传
function upload() {
$("#FileLoad").click();
}
//删除
function imgdel(listId, FileId, hfId) {
$.post("/CommonModule/ashx/public.ashx?action=DelMessageImgFiles=" + $("#" + hfId).val(), function (result) {
if (result != "ok")
$.messager.alert("消息提示", "删除失败!");
});
var html = "liimg src=\"/Themes/Images/jia.jpg\" style=\"height: 80px; width: 80px;\" /input type=\"file\" id=\""+FileId+"\" class=\"input\" onchange=\"ImgUpload('"+FileId+"','"+hfId+"','"+listId+"');\" name=\""+FileId+"\" //li"
$("#"+listId).html(html);
}
//添加成功
function imgaddhtml(data, code,listId,fileId,hfId) {
var list = data.split(',');
var html = "li onmouseover=\"imgshow(this)\" onmouseout=\"imghide(this);\"";
html += "a style=\"height:80px;width:80px;\" href=\"" + list[0] + "\" target=\"_blank\"img src=\"" + list[0] + "\" imgs=\"" + list[0] + "\" code=\"" + code + "\" //aspan onclick=\"imgdel('"+listId+"','"+fileId+"','"+hfId+"')\"/span/li";
$("#" + listId).html(html);
}
//图片文件上传
//uppath 上传空间id
//上传成功存放的图片路径的隐藏域id
//listId 显示图片的区域id
function ImgUpload(uppath, hndimg,listId) {
var sendUrl = "/CommonModule/ashx/Upload_Ajax.ashx?action=SingleFileIsThumbnail=1UpFilePath=" + uppath;
//开始提交
$("#form1").ajaxSubmit({
beforeSubmit: function (formData, jqForm, options) {
//alert(1);
},
success: function (data, textStatus) {
var list = $("#" + hndimg).val();
$("#" + hndimg).val(data.msgbox);
imgaddhtml(data.msgbox, 0,listId,uppath,hndimg);
},
error: function (data, status, e) {
alert("上传失败!");
},
url: sendUrl,
type: "post",
dataType: "json",
timeout: 600000
});
};
Img_List.css 如下:
.img_list{ margin:0px; padding:0px; overflow:hidden;}
.img_list ul,.img_list ul li{ margin:0px; padding:0px;}
.img_list ul li{ float:left; list-style:none; position:relative; margin:5px 0px 0px 5px;}
.img_list ul li span
{ position:absolute;top:3px; right:3px; width: 16px; height: 16px; opacity: 0.6;filter: alpha(opacity=60); margin: 0 0 0 2px;
vertical-align: top; background: url('/Themes/Images/panel_tools.png') no-repeat -16px 0px;}
.img_list ul li img{ width:80px; height:80px; cursor:pointer; position:relative; z-index:0;}
.img_list ul li .input{ width:80px; height:80px; cursor:pointer; position:relative; left:-100px;vertical-align: top; margin:0px; padding:0px; opacity:0;filter: alpha(opacity=0); }
panel_tools.png 如下:
jia.jpg 如下:
前台页面代码:
tr
th图片1:/th
td
asp:Literal ID="ltrimg_list" runat="server"/asp:Literal
input type="hidden" runat="server" id="ImgPath" name="ImgPath" /
span style="color:blue;"建议尺寸(243*150)/span
/td
/tr
tr
th图片2:/th
td
asp:Literal ID="Literal1" runat="server"/asp:Literal
input type="hidden" runat="server" id="hkImgPath" name="hkImgPath" /
span style="color:blue;"建议尺寸(243*150)/span
/td
/tr
后台初始化代码:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ltrimg_list.Text = UpLoad.showUploadFile("File1", "ImgPath", mfmodel.ImgPath, "img_list1");
Literal1.Text = UpLoad.showUploadFile("File2", "hkImgPath", mfmodel.hkImgPath, "img_list2");
}
}
/// summary
/// 生成一个上传插件信息
/// /summary
/// param name="fileId"上传控件id/param
/// param name="hfId"隐藏域id用来保存上传的图片路径/param
/// param name="imgUrl"初始化显示的图片地址/param
/// param name="listId"上传成功之后用来显示上传图片的标签id/param
/// returns/returns
public static string showUploadFile(string fileId, string hfId, string imgUrl, string listId)
{
string result = "";
if (!string.IsNullOrEmpty(imgUrl))
{
result = "div class=\"img_list\"ul id=\"" + listId + "\"li onmouseover=\"imgshow(this)\" onmouseout=\"imghide(this);\"a style=\"height:80px;width:80px;\" href=\"" + imgUrl + "\" target=\"_blank\"img src=\"" + imgUrl + "\" imgs=\"" + imgUrl + "\" code=\"0\" //aspan onclick=\"imgdel('" + listId + "','" + fileId + "','" + hfId + "')\"/span/li/ul/div";
}
else
{
result = "div class=\"img_list\"ul id=\"" + listId + "\"liimg src=\"/Themes/Images/jia.jpg\" style=\"height: 80px; width: 80px;\" /input type=\"file\" id=\"" + fileId + "\"class=\"input\" onchange=\"ImgUpload('" + fileId + "','" + hfId + "','" + listId + "')\" name=\"" + fileId + "\" //li/ul/div";
}
return result;
}
上传方法:
#region 上传单文件处理===================================
46 private void SingleFile(HttpContext context)
47 {
48
49 string _refilepath = context.Request.QueryString["ReFilePath"]; //取得返回的对象名称
50 string _upfilepath = context.Request.QueryString["UpFilePath"]; //取得上传的对象名称
51 string _delfile = context.Request.QueryString[_refilepath];
52 HttpPostedFile _upfile = null;
53 try
54 {
55 _upfile = context.Request.Files[_upfilepath];
56 }
57 catch (Exception e)
58 {
59 context.Response.Write("{\"msg\": \"0\", \"msgbox\": \"上传文件过大!\"}");
60 context.Response.End();
61 }
62 bool _iswater = false; //默认不打水印
63 bool _isthumbnail = false; //默认不生成缩略图
64 bool _isimage = false;
65
66 if (context.Request.QueryString["IsWater"] == "1")
67 _iswater = true;
68 if (context.Request.QueryString["IsThumbnail"] == "1")
69 _isthumbnail = true;
70 if (context.Request.QueryString["IsImage"] == "1")
71 _isimage = true;
72
73 if (_upfile == null)
74 {
75 context.Response.Write("{\"msg\": \"0\", \"msgbox\": \"请选择要上传文件!\"}");
76 return;
77 }
78 UpLoad upFiles = new UpLoad();
79 string msg = upFiles.fileSaveAs(_upfile, _isthumbnail, _iswater, _isimage);
80 //删除已存在的旧文件
81 Utils.DeleteUpFile(_delfile);
82 //返回成功信息
83 context.Response.Write(msg);
84
85 context.Response.End();
86 }
87 #endregion
101 public string fileSaveAs(HttpPostedFile postedFile, bool isThumbnail, bool isWater, bool _isImage, bool _isReOriginal)
102 {
103 try
104 {
105 string fileExt = Utils.GetFileExt(postedFile.FileName); //文件扩展名,不含“.”
106 string originalFileName = postedFile.FileName.Substring(postedFile.FileName.LastIndexOf(@"\") + 1); //取得文件原名
107 string fileName = Utils.GetRamCode() + "." + fileExt; //随机文件名
108 string dirPath = GetUpLoadPath(); //上传目录相对路径
109
110 //检查文件扩展名是否合法
111 if (!CheckFileExt(fileExt))
112 {
113 return "{\"msg\": \"0\", \"msgbox\": \"不允许上传" + fileExt + "类型的文件!\"}";
114 }
115 //检查是否必须上传图片
116 if (_isImage !IsImage(fileExt))
117 {
118 return "{\"msg\": \"0\", \"msgbox\": \"对不起,仅允许上传图片文件!\"}";
119 }
120 //检查文件大小是否合法
121 if (!CheckFileSize(fileExt, postedFile.ContentLength))
122 {
123 return "{\"msg\": \"0\", \"msgbox\": \"文件超过限制的大小啦!\"}";
124 }
125 //获得要保存的文件路径
126 string serverFileName = dirPath + fileName;
127 string serverThumbnailFileName = dirPath + "small_" + fileName;
128 string returnFileName = serverFileName;
129 //物理完整路径
130 string toFileFullPath = Utils.GetMapPath(dirPath);
131 //检查有该路径是否就创建
132 if (!Directory.Exists(toFileFullPath))
133 {
134 Directory.CreateDirectory(toFileFullPath);
135 }
136 //保存文件
137 postedFile.SaveAs(toFileFullPath + fileName);
138 //如果是图片,检查图片尺寸是否超出限制
139 if (IsImage(fileExt))
140 {
141 Thumbnail.MakeThumbnailImage(toFileFullPath + fileName, toFileFullPath + fileName, 3000, 3000);
142 }
143 //是否生成缩略图
144 if (IsImage(fileExt) isThumbnail)
145 {
146 Thumbnail.MakeThumbnailImage(toFileFullPath + fileName, toFileFullPath + "small_" + fileName, 150, 150, "R");
147 // returnFileName += "," + serverThumbnailFileName; //返回缩略图,以逗号分隔开
148 }
149
166 /
171 return "{\"msg\": \"1\", \"msgbox\": \"" + returnFileName + "\"}";
172 }
173 catch
174 {
175 return "{\"msg\": \"0\", \"msgbox\": \"上传过程中发生意外错误!\"}";
176 }
177 }
jQuery实现带滚动导航效果的全屏滚动相册实例
本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册。分享给大家供大家参考。具体如下:
运行效果图如下:
主要代码如下:
$(function()
{
//加载时的图片
var
$loader=
$('#st_loading');
//获取的ul元素
var
$list=
$('#st_nav');
//当前显示的图片
var
$currImage
=
$('#st_main').children('img:first');
//加载当前的图片
//同时显示导航的项
$('img').load(function(){
$loader.hide();
$currImage.fadeIn(3000);
//滑出导航
setTimeout(function(){
$list.animate({'left':'0px'},500);
},
1000);
}).attr('src',$currImage.attr('src'));
//计算出将被显示的略缩图所在的div元素的宽度
buildThumbs();
function
buildThumbs(){
$list.children('li.album').each(function(){
var
$elem
=
$(this);
var
$thumbs_wrapper
=
$elem.find('.st_thumbs_wrapper');
var
$thumbs
=
$thumbs_wrapper.children(':first');
//每张略缩图占有180像素的宽度和3像素的间距(margin)
var
finalW
=
$thumbs.find('img').length
*
183;
$thumbs.css('width',finalW
+
'px');
//是这元素具有滚动性
makeScrollable($thumbs_wrapper,$thumbs);
});
}
//点击菜单项目的时候(向上向下箭头切换)
//使略缩图的div层显示和隐藏当前的
//打开菜单(如果有的话)
$list.find('.st_arrow_down').live('click',function(){
var
$this
=
$(this);
hideThumbs();
$this.addClass('st_arrow_up').removeClass('st_arrow_down');
var
$elem
=
$this.closest('li');
$elem.addClass('current').animate({'height':'170px'},200);
var
$thumbs_wrapper
=
$this.parent().next();
$thumbs_wrapper.show(200);
});
$list.find('.st_arrow_up').live('click',function(){
var
$this
=
$(this);
$this.addClass('st_arrow_down').removeClass('st_arrow_up');
hideThumbs();
});
//点击略缩图,改变大的图片
$list.find('.st_thumbs
img').bind('click',function(){
var
$this
=
$(this);
$loader.show();
$('img
class="st_preview"/').load(function(){
var
$this
=
$(this);
var
$currImage
=
$('#st_main').children('img:first');
$this.insertBefore($currImage);
$loader.hide();
$currImage.fadeOut(2000,function(){
$(this).remove();
});
}).attr('src',$this.attr('alt'));
}).bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.7'});
});
//隐藏当前已经打开了的菜单的函数
function
hideThumbs(){
$list.find('li.current')
.animate({'height':'50px'},400,function(){
$(this).removeClass('current');
})
.find('.st_thumbs_wrapper')
.hide(200)
.andSelf()
.find('.st_link
span')
.addClass('st_arrow_down')
.removeClass('st_arrow_up');
}
//是当前的略缩图div层滚动
//当鼠标移至菜单层的时候会自动地进行滚动
function
makeScrollable($outer,
$inner){
var
extra
=
800;
//获取菜单的宽度
var
divWidth
=
$outer.width();
//移除滚动条
$outer.css({
overflow:
'hidden'
});
//查找容器上的最后一张图片
var
lastElem
=
$inner.find('img:last');
$outer.scrollLeft(0);
//当用户鼠标离开菜单的时候
$outer.unbind('mousemove').bind('mousemove',function(e){
var
containerWidth
=
lastElem[0].offsetLeft
+
lastElem.outerWidth()
+
2*extra;
var
left
=
(e.pageX
-
$outer.offset().left)
*
(containerWidth-divWidth)
/
divWidth
-
extra;
$outer.scrollLeft(left);
});
}
});
希望本文所述对大家的jQuery程序设计有所帮助。
jquery相册代码的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于相册代码html、jquery相册代码的信息别忘了在本站进行查找喔。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
- 05-09网页代码,网页代码快捷键
- 05-07html网页制作软件,html网页制作软件手机版下载
- 05-06单页网站的代码(完整的网页代码)[20240506更新]
- 05-06个人主页图片代码(个人主页图片代码怎么弄)[20240506更新]
- 05-06提取微信名片代码(微信名片信息提取)[20240506更新]
- 05-06php后台权限管理代码(php管理员权限)[20240506更新]
- 05-06付费观看代码php(付费观看代码)[20240506更新]
- 05-06在线html执行代码(html怎么运行)[20240506更新]
- 05-06源代码管理资源管理器(资源管理器运行代码)[20240506更新]
- 05-06代码源软件库(程序代码库)[20240506更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接