ASP.NET工作笔记之一:图片上传预览及无刷新上传

转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html

最近项目里面涉及到无刷新上传图片的功能,其实也就是上传一些封面,然后我就想当选择图片的时候,右边出现预览图(在没有上传到服务器的情况下),当点击上传的时候在上传到服务器(无刷新上传),所以也就找了些资料,做了下这方面的功能。

折腾着,折腾着,也就折腾出来啦。现在在这写个笔记。

首先是预览功能,使用了cloudgamer的JavaScript 图片上传预览效果,这里也遇到了些问题,就是我会在File控件的后面设置一个按钮来清空前面File里面的值,并且在预览图片的地方显示默认的图片(是为了项目里面,当这条记录有封面时,则显示他的封面图片)。

JS代码如下:

ASP.NET工作笔记之一:图片上传预览及无刷新上传
  //清空File控件的值,并且预览处显示默认的图片
function clearFileInput()
{
var form = document.createElement('form');
document.body.appendChild(form);
//记住file在旧表单中的的位置
var file = document.getElementById("idFile");
var pos = file.nextSibling;
form.appendChild(file);
form.reset();//通过reset来清空File控件的值
document.getElementById("colspan").appendChild(file);
document.body.removeChild(form);
//在预览处显示图片 这是在浏览器支持滤镜的情况使用的
document.getElementById("idImg").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='images/abshiu.jpg'";
//这是是火狐里面显示默认图片的
if (navigator.userAgent.indexOf('Firefox') >= 0)
{
$("#idImg").attr('src', 'images/abshiu.jpg');
}
}
ASP.NET工作笔记之一:图片上传预览及无刷新上传

HTML代码如下:

ASP.NET工作笔记之一:图片上传预览及无刷新上传
<table border="0" class="perview">
<tr>
<th width="45%">选择文件</th>
<th width="45%">预览图</th>
<th width="10%">上传图片</th>
</tr>
<tr>
<td><span id="colspan"><input id="idFile" runat="server" name="pic" type="file" /></span>&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" id="resets" name="resets" value="还原" onclick="clearFileInput()" />
</td>
<td align="center"><img id="idImg" src="data:images/abshiu.jpg" />
</td>
<td><input type="button" name="resets" value="上传保存图片" onclick="upLoadFile()" />
</td>
</tr>
</table>
<script> var ip = new ImagePreview($$("idFile"), $$("idImg"), {
maxWidth: 200, maxHeight: 200, action: "ImagePreview.ashx"
});
ip.img.src = ImagePreview.TRANSPARENT;
ip.file.onchange = function() { ip.preview(); };
</script>
ASP.NET工作笔记之一:图片上传预览及无刷新上传

做到这里的话 预览效果就已经搞定啦,然后就是无刷新上传,虽然cloudgamer的博客里面有简便无刷新文件上传系统,但是我没有采用,而是使用了jquery.form.js来做无刷新上传效果,代码如下:

ASP.NET工作笔记之一:图片上传预览及无刷新上传
function upLoadFile()
{
var options = {
type: "POST",
url: 'Files.ashx',
success: showResponse
}; // 将options传给ajaxForm
$('#myForm').ajaxSubmit(options);
}
function showResponse()
{
alert("上传成功!");
}
ASP.NET工作笔记之一:图片上传预览及无刷新上传

关于jquery.form.js的API,百度下吧。#myForm就是页面的form的ID,Files.ashx则负责图片的上传处理,Files.ashx的代码如下:

ASP.NET工作笔记之一:图片上传预览及无刷新上传
public class File_WebHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
HttpFileCollection files = context.Request.Files;
if (files.Count > 0)
{
Random rnd = new Random();
for (int i = 0; i < files.Count; i++)
{
HttpPostedFile file = files[i]; if (file.ContentLength > 0)
{
string fileName = file.FileName;
string extension = Path.GetExtension(fileName);
int num = rnd.Next(5000, 10000);
string path = "file/" + num.ToString() + extension;
file.SaveAs(System.Web.HttpContext.Current.Server.MapPath(path));
}
}
}
} public bool IsReusable
{
get
{
return false;
}
}
ASP.NET工作笔记之一:图片上传预览及无刷新上传

代码到这里一个简单的例子也就完成啦。附上小例子的源码:

图片上传预览及无刷新上传

上一篇:UIWrapContent(NGUI长列表优化利器)


下一篇:虚拟化(四):vsphere高可用功能前提-共享存储搭建