ASP.NET工作笔记之一：图片上传预览及无刷新上传
转自：http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html
最近项目里面涉及到无刷新上传图片的功能，其实也就是上传一些封面，然后我就想当选择图片的时候，右边出现预览图（在没有上传到服务器的情况下），当点击上传的时候在上传到服务器（无刷新上传），所以也就找了些资料，做了下这方面的功能。
折腾着，折腾着，也就折腾出来啦。现在在这写个笔记。
首先是预览功能，使用了cloudgamer的JavaScript 图片上传预览效果，这里也遇到了些问题，就是我会在File控件的后面设置一个按钮来清空前面File里面的值，并且在预览图片的地方显示默认的图片（是为了项目里面，当这条记录有封面时，则显示他的封面图片）。
JS代码如下：
//清空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');
}
}
HTML代码如下：
<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> <input type="button" id="resets" name="resets" value="还原" onclick="clearFileInput()" />
</td>
<td align="center"><img id="idImg" src="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>
做到这里的话 预览效果就已经搞定啦，然后就是无刷新上传，虽然cloudgamer的博客里面有简便无刷新文件上传系统，但是我没有采用，而是使用了jquery.form.js来做无刷新上传效果，代码如下：
function upLoadFile()
{
var options = {
type: "POST",
url: 'Files.ashx',
success: showResponse
};
// 将options传给ajaxForm
$('#myForm').ajaxSubmit(options);
}
function showResponse()
{
alert("上传成功!");
}
关于jquery.form.js的API，百度下吧。#myForm就是页面的form的ID，Files.ashx则负责图片的上传处理,Files.ashx的代码如下：
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;
}
}
代码到这里一个简单的例子也就完成啦。附上小例子的源码：