经过一段时间的jquery插件学习,现在终于可以自己开发插件了。
先来一张效果图吧:
终于弄到了一张小于2M的图片了。
HTML代码:
服务器端处理页面upload.aspx.cs方法文件代码:
功能说明:
1.此为,覆盖上传(即,上传时先判断是有已经有图片,有则先删除原图再上传,减少图片垃圾)
2.页面加载时,若有图片则显示图片(修改时特别简单,无需复杂的给img绑定url,只需该hidden赋值即可)
如:
protected void Page_Load(object sender, EventArgs e)
{
Hidden1.Value = "images/1.jpg";
}
则在页面加载时会在hidden1控件所在的上传体中显示1.jpg的图片。(所图片显示非常简单)
3.上图片后,双击图片可删除图片(服务器上同时删除)
4.图片格式限制,目前只能上传格式为gif|jpeg|jpg|png|bmp,双重验证(js+服务器端)如果把.rar改成.jpg也是不能上传的。
5.此为ajax异步上传,上传体验更好,上传完后即可预览。
6.适合于上传单张图片。
使用说明:
<div>
<input type="hidden" id="Hidden2" runat="server" value="" />
<p class="img_p">
</p>
<span class="img_span">
<input type="file" name="file" />
</span>
<input type="button" value="上传" class="upload" /><br />
<span>图片最适合宽度 390px × 228px。</span>
</div>
此为一个上传体:
页面中需引入
jquery.1.4.X.js,
jquery.upload.min.js//此插件合并了jquery.form.js插件所以无需在引入jquery.form.js插件。
上传体说明:
1.
<input type="hidden" id="Hidden2" runat="server" value="" />
这个是隐藏域,用于存储上传后返回的图片路径。
注:如果需要后台.cs文件获取图片地址的话,请加上ruant="server".
同样你也可以使用asp.net的服务器端控件,如:
<asp:HiddenField ID="HiddenField1" runat="server" />
2.
<p class="img_p">
</p>
此为上传图片成功后,图片将显示在这里。
3.
<span class="img_span">
<input type="file" name="file" />
</span>
此为图片浏览控件,当点击上传时将在这里显示"正在上传..."并和loading图片一起显示。
上传成功后将重新填回<input type="file" name="file" />控件
4.
<input type="button" value="上传" class="upload" />
此为上传按钮。
上传体中的这些控件必须有。class不能变
$(o).parent().find("input:hidden")
$(o).parent().find("input:file")
$(o).parent().find("span.img_span")
$(o).parent().find("p.img_p")
o为上传按钮
插件中是以以上的的方式获取这些对象的,所以class不能改变,元素不能变。
使用方法:
1.$("input.upload").upload();
2.$("input.upload").upload({imgWidth:"300",imgHeight:"200",postUrl:"upload.aspx"});
参数说明:
{imgWidth:"300",imgHeight:"200",postUrl:"upload.aspx"}
imgWidth:图片显示的宽,默认为:"",可为数字或"100"。
imgHeight:图片显示的高,默认为100,可为数字或"100"。
postUrl:提交上传请求的url地址,默认为"upload.aspx"。
imgWidth,imgHeight当两者都为""(空字符串)时怎按原图显示。
当imgWidth为"",imgHeight给值时,图片的宽将根据高按比率缩小。
同理 若给imgWidth值,而imgHeight为""时,则高将根据宽按比率缩小。
注意:此上传插件保存的是图片的原图,不会对图片进行大小的改变。只对图片显示的大小进行改变(根据给的参数进行限制)。
说明,此版本为jquey插件,在此以前的版本不是jquery插件。
此次修改了一些bug。主要改变还是做成了插件。这样使用起来简单多了。
此前的版本请看我的相关文章
喜欢的这个插件的朋友可以加入:63181865 索取demo
分享到:
相关推荐
借用jquery库异步上传的插件,可以支持批量上传,代码简单,用起来方便
PHP多文件上传插件,PHP+jQuery+Ajax多图片上传 效果查看:https://blog.csdn.net/chendongpu/article/details/123545180
基于Jquery实现的图片预览插件,支持图片手动和鼠标滚轮滑动放大缩小、支持图片旋转转和多图片切换、支持图片分组预览,下载后即可快速使用。
资源名:jQuery图片批量上传插件源码 资源类型:程序源代码 源码说明:实现图片预览,预览图片移除,任意张数异步上传,上传进度条指示,已选中且上传的图片不会重复上传,且不能移除 使用方法 界面顶部引入IMGUP....
ajax jquery 上传插件,支持ajax ,jquery
使用jquery 预览图片并实现无刷新上传 使用了jquery.ajaxfileupload.js插件实现无刷新上传
jquery ajax分页插件 jquery ajax分页插件 jquery ajax分页插件
基于jquery扩展的前端分页插件,只需要将注重点放在后面json数据上,前端只需要遍历表格数据就可完成整个前端的分页操作。 PS:如遇BUG请自行修改 使用请引入css和js $("div").easyPage(url,param,function(data){ $...
swfupload是比较著名的图片上传工具,可以多图片上传,在一次开发中偶遇uploadify,比swfupload还强大好用,选项也很丰富,功能也很强大,再配合ajax技术,可以把多图片上传发挥到极致,我曾用它做多图片上传,上传...
基于jquery.masonry插件开发的瀑布流ajax动态加载数据功能(使用的是aspx的页面)
ajax异步上传文件插件,ajax异步上传文件插件,ajax异步上传文件插件,无奈要50个字
采用jquery插件的ajax无刷上传组建,可以按条件上传。可以支持火狐ie,opera,safari等。自带php后台,也可以用asp。net或jsp实现后台。
jquery form ajax 插件
jquery.form.js,这是一个完美提交表单的jquery插件,jquery的ajax无法提交图片,而这个插件可以完美解决,使用方法,将该文件放到jquery后面引入:$('#order_form').ajaxForm(function(a) { var b = eval("(" + a ...
ajax图片上,图片异步上传,更多详情请看 图片上传插件,基于jquery的上传插件,ajax图片上传,再更新 http://blog.csdn.net/weizengxun/article/details/8197716
这是一款可以选择多张图片同时上传,不要的还可以移除,实时预览图片的jQuery多张图片批量上传插件代码。 功能描述 实现图片预览,预览图片移除,任意张数异步上传,上传进度条指示,已选中且上传的图片不会重复...
今天介绍大家一款多图片上传插件:plupload,通过PHP+Ajax实现多图片上传的效果。用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并立即显示在页面上。
springmvc集合jquery插件上传图片及文件,非常简单,代码量非常少,可无缝引入到你的项目中。网上很多资源都无法运行,这个绝对可用。
用PHP JQUERY并使用了jcrop,uploadfiy制作的头像上传插件。有图片裁剪,图片尺寸过大时自动改变大小等功能.
本文实例讲述了jQuery实现文件编码成base64并通过AJAX上传的方法。分享给大家供大家参考,具体如下: 使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果。 ...