图片上传预览及无刷新上传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 (erAgent.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;}}代码到这里一个简单的例子也就完成啦。
附上小例子的源码：图片上传预览及无刷新上传使用JQuery上传插件Uploadify 3.1无刷新上传图片示例.aspx文件：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" ><head runat="server"><title>无标题页</title><style type="text/css">#preview{margin: 2px 0 0 0;}#previewImage{ border:1px solid #ddd; padding:3px;}</style><link rel="stylesheet" type="text/css"href="jQueryPlugin/Uploadify/uploadify.css" /><script src="js/jquery.min.js" type="text/javascript"></script><script type="text/javascript" src="js/DrawImage.js"></script><script src="jQueryPlugin/Uploadify/jquery.uploadify-3.1.min.js"type="text/javascript"></script><script type="text/javascript">$(function () {$("#uploadImage").uploadify({width: 100,height: 26,swf: 'jQueryPlugin/Uploadify/uploadify.swf', //[*]swf的路径uploader: 'HttpHandler/Uploadify.ashx', //[*]一般处理程序cancelImg: 'jQueryPlugin/Uploadify/uploadify-cancel.png', //取消图片路径multi: false,'fileTypeDesc': '图片文件',fileTypeExts: '*.gif;*.jpg;*.jpeg;*.png', //允许上传的文件类型，使用分号(”;)”分割例如:*.jpg;*.gif,默认为null(所有文件类型)'fileSizeLimit': '6000KB',onUploadSuccess: function (file, data, response) {//上传完成时触发（每个文件触发一次）if (data.indexOf('错误提示') > -1) {alert(data);}else {$("#previewImage").attr("src",data.substr(2)).hide().fadeIn(2000);}},'onUploadError': function (file, errorCode, errorMsg, errorString) {//当单个文件上传出错时触发alert('文件：' + + ' 上传失败: ' + errorString);},buttonText: '选择图片'});});</script></head><body><form id="form1" runat="server"><div id="upload"><input type="file" name="uploadImage" id="uploadImage" /></div><div id="preview"><img id="previewImage" src="images/no_pic.gif" alt="暂无图片" onload="DrawImage(this,120,120,'')" /></div></form></body></html>Uploadify.ashx文件代码：using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.IO;namespace CCMS.Web.HttpHandler{/// <summary>/// Uploadify 的摘要说明/// </summary>public class Uploadify : IHttpHandler{protected string AllowExt ="7z|aiff|asf|avi|bmp|csv|doc|docx|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mo v|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pptx|pxd|qt|ram|rar|rm|rmi |rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|x ls|xlsx|xml|zip";//支持的文件格式int FileMaxSize = 10240;//文件大小，单位为Kpublic void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";//context.Response.Write("Hello World");//HttpPostedFile file = context.Request.Files[0];//获取上传文件方式一HttpPostedFile fileUpload =context.Request.Files["Filedata"];//获取上传文件方式二if (fileUpload != null){try{string UploadDir = "~/upload/Uploadify/";//图片保存的文件夹//图片保存的文件夹路径string path = context.Server.MapPath(UploadDir);//每天上传的图片一个文件夹string folder = DateTime.Now.ToString("yyyyMM");//如果文件夹不存在，则创建if (!Directory.Exists(path + folder)){Directory.CreateDirectory(path + folder);}//上传图片的扩展名string fileExtension =fileUpload.FileName.Substring(stIndexOf('.'));//判断文件格式if (!CheckValidExt(fileExtension)){context.Response.Write("错误提示：文件格式不正确！" + fileExtension);return;}//判断文件大小if (fileUpload.ContentLength > FileMaxSize * 1024){context.Response.Write("错误提示：上传的文件(" + fileUpload.FileName + ")超过最大限制：" + FileMaxSize + "KB");return;}//保存图片的文件名//string saveName = Guid.NewGuid().ToString() + fileExtension;//使用时间+随机数重命名文件string strDateTime =DateTime.Now.ToString("yyMMddhhmmssfff");//取得时间字符串Random ran = new Random();string strRan = Convert.ToString(ran.Next(100, 999));//生成三位随机数string saveName = strDateTime + strRan + fileExtension;//保存图片fileUpload.SaveAs(path + folder + "/" + saveName);context.Response.Write(UploadDir + folder + "/" + saveName);}catch{context.Response.Write("错误提示：上传失败");}}}public bool IsReusable{get{return false;}}#region 检测扩展名的有效性 bool CheckValidExt(string sExt)/// <summary>/// 检测扩展名的有效性/// </summary>/// <param name="sExt">文件名扩展名</param>/// <returns>如果扩展名有效,返回true,否则返回false.</returns>public bool CheckValidExt(string strExt){bool flag = false;string[] arrExt = AllowExt.Split('|');foreach (string filetype in arrExt){if (filetype.ToLower() == strExt.ToLower().Replace(".", "")){flag = true;break;}}return flag;}#endregion} }。